JqProgressBar

Developer
Max
Size
2,471 Kb
Views
18,216
  1. JqProgressBar Previews
  2. JqProgressBar HTML Codes
  3. JqProgressBar CSS Codes
  4. JqProgressBar JS Codes

How do I make an jqprogressbar?

Simple jQuery progress bar to show percentage increase or decrease.. What is a jqprogressbar? How do you make a jqprogressbar? This script and codes were developed by Max on 21 November 2022, Monday.

JqProgressBar Previews
IQ Test

JqProgressBar - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>jqProgressBar</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body> <h2>jqProgressBar</h2> <div class="progressBar1 progressBar"> </div> <div class="progressBar2 progressBar"> </div> <div class="progressBar3 progressBar"> </div> <a id="button">Click here</a>
</body>
</html> <script src="js/index.js"></script>
</body>
</html>

JqProgressBar - Script Codes CSS Codes

body{ font-family: verdana; font-size: 14px;
}
.progressBar{ height: 20px; width: 200px; border: 1px solid #333; background: #000; text-align: center; color: #fff;
}
#button{ cursor: pointer; text-transform: uppercase; background: #ddd; padding: 4px; border: 1px solid #aaa; margin-top: 10px; display: block; width: 100px;
}

JqProgressBar - Script Codes JS Codes

//Plugin Code Begins
;(function($){ $.fn.jqProgressBar = function(options){ //Settings var settings = $.extend({ "initPercent": 0, "percent" : 100, "speed" : 600, "showText" : true, "text" : "&nbsp;%&nbsp;" }, options), //Get the current width of the selected element currentWidth = this.width(); //main return this.each(function(index, value){ //Define var obj = $(this), autoWidth = obj.css('width', 'auto').width(), progressBarWidth = settings.percent * currentWidth / 100; //Set the initial width, animate and then set the width of the element to progressWidth obj.css({ "width" : settings.initPercent * currentWidth / 100 + "px" }).animate({ width : progressBarWidth }, settings.speed, function(){ obj.css({ "width" : progressBarWidth + "px" }); //Display innerHTML if the showText is True if(settings.showText){ obj.html(settings.percent + settings.text); } }); obj.attr("data-progress", settings.percent); }); };
}(jQuery));
//Plugin Code Ends
//Demo Code Begins
$(function(){ $("#button").one("click", function() { //progressBar1 $(".progressBar1").jqProgressBar({ "initPercent" : 100, "percent" : 80, "speed" : 1000, "showText": true }); //progressBar2 $(".progressBar2").jqProgressBar({ "percent" : 40, "speed" : 1000, "showText": true }); //progressBar3 $(".progressBar3").jqProgressBar({ "percent" : 100, "speed" : 1000, "showText": true }); //progressBar3 with Click event $(".progressBar3").click(function(evt){ $(".progressBar3").jqProgressBar({ "percent" : 80, "speed" : 1000, "showText": true }); }); });
});
//Demo Code Ends
JqProgressBar - Script Codes
JqProgressBar - Script Codes
Home Page Home
Developer Max
Username maxds
Uploaded November 21, 2022
Rating 3
Size 2,471 Kb
Views 18,216
Do you need developer help for JqProgressBar?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Max (maxds) Script Codes
Name
Highlight a DIV and fade others using CSS
A Pen by Max
Encode image to Base64
JqSocialSharer
GetUrlParameters
JQuery Simple Li Accordion
Awesome Blockquote Styling with CSS
JQuery Social Sharer
Table border-collapse property
CSS3 Word Wrapping
Create amazing art & images with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!