In jQuery Progress bar example, I am going to demonstrate how to make a simple jQuery animated progress bar with percentage.
Follow the below steps to make progress bar like shown in the below image.
Step 1: Add jQuery to your HTML
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
Step 2: Add a div (container) to body with the following CSS.
<div class="container"></div>
.container{ width: 300px; border: 1px solid #ddd; border-radius: 5px; overflow: hidden; display:inline-block; margin:0px 10px 5px 5px; vertical-align:top; }
Step 3: Append a div(progressbar) to container(div) with the following CSS.
<div class="container"><div class="progressbar"></div></div>
.progressbar { color: #fff; text-align: right; height: 25px; width: 0; background-color: #0ba1b5; border-radius: 3px; }
Step 4: Whenever you want to change the progress, change the width of progress bar
function setProgress(progress) { var progressBarWidth =progress*$(".container").width()/ 100; $(".progressbar").width(progressBarWidth).html(progress + "% "); }
You can see the Output here: Click Here
Step 5: We can convert the above code to a jQuery plugin.
(function ($) { $.fn.progressbar = function (options) { var settings = $.extend({ width:'300px', height:'25px', color:'#0ba1b5', padding:'0px', border:'1px solid #ddd'},options); //Set css to container $(this).css({ 'width':settings.width, 'border':settings.border, 'border-radius':'5px', 'overflow':'hidden', 'display':'inline-block', 'padding': settings.padding, 'margin':'0px 10px 5px 5px' }); // add progress bar to container var progressbar =$("<div></div>"); progressbar.css({ 'height':settings.height, 'text-align': 'right', 'vertical-align':'middle', 'color': '#fff', 'width': '0px', 'border-radius': '3px', 'background-color': settings.color }); $(this).append(progressbar); this.progress = function(value) { var width = $(this).width() * value/100; progressbar.width(width).html(value+"% "); } return this; }; }(jQuery));
Note: After minify, jQuery progress bar plugin size is < 1KB.
jQuery Progress bar is ready now, below are the examples how to use it.
var bar1 = $("#progress1").progressbar(); bar1.progress(60); var bar2 = $("#progress2").progressbar({color:'#145ABA'}); bar2.progress(90); var bar3 = $("#progress3").progressbar({width:'400px',color:'#0A8F2B',border:'2px solid #0A8F2B',padding:'3px'}); bar3.progress(80); var bar4 =$("#progress4").progressbar({width:'500px',color:'#B3240E',border:'1px solid #000000'}); bar4.progress(50);
You can clone the script from : Github