Animated Progress Bar Using jQuery And CSS

Friday, Jan 27, 2017

Tags:- jQuery CSS


In this tutorial we will show you how to create a simple progress bar using jQuery and CSS. Progress bar is used to display real time progress of a process you can use progress bar in anything for eg in file uploading, form submission process etc.You may also like file upload progress bar using jQuery.


See Demo
Animated Progress Bar Using jQuery And CSS


To Create Animated Progress Bar It Takes Only Two Steps:-

  1. Make a HTML file and define markup and scripting
  2. Make a CSS file and define styling


Step 1.Make a HTML file and define markup and scripting

We make a HTML file and save it with a name progress_bar.html

<html>
<head>
<link href="progress_bar_style.css" type="text/css" rel="stylesheet"/>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
function animate_progressbar()
{
 $total_width=$("#progressbar_wrapper").width();
 $width_inc=$total_width/10;
 if($("#progressbar").width()<$total_width)
 {
  $width=$("#progressbar").width()+$width_inc;
  $("#progressbar").animate({width:''+$width+''},300);
 }
}
function reset_progressbar()
{
 $("#progressbar").animate({width:'0px'},300);
}
</script>
</head>
<body>
<div id="wrapper">

<div id="progressbar_div">
<div id="progressbar_wrapper">
 <div id="progressbar"></div>
</div>
<p>
<input type="button" value="ANIMATE" onclick="animate_progressbar();">
<input type="button" value="RESET" onclick="reset_progressbar();">
</p>
</div>

</div>
</body>
</html>

In this step we create two div one for progress bar wrapper and another is for progress bar.We create two button to animate the progress of progress bar and reset the progress bar.You may also like multistep form with progress bar using jQuery.

To animate progress bar we create animate_progressbar() function in this we get progress bar wrapper width and divide by 10 you can use any number then we check the progress bar width is smaller then its wrapper if yes we increase the progress bar width using animate function of jQuery(). To reset the progress bar we simply set progress bar width to 0 by calling reset_progressbar() function.You may also like display progress bar while page load.



Step 2.Make a CSS file and define styling

We make a CSS file and save it with a name progress_bar_style.css

body
{
 margin:0 auto;
 padding:0px;
 text-align:center;
 width:100%;
 font-family: "Myriad Pro","Helvetica Neue",Helvetica,Arial,Sans-Serif;
 background-color:#A9F5A9;
}
#wrapper
{
 margin:0 auto;
 padding:0px;
 text-align:center;
 width:995px;
}
#progressbar_wrapper
{
 border:1px solid #088A08;
 margin-left:345px;
 margin-top:20px;
 width:300px;
 height:35px;
 border-radius:3px;
 overflow:hidden;
}
#progressbar
{
 width:0px;
 height:35px;
 border-radius:0px;
 background-color:green;
}
#progressbar_div input[type="button"]
{
 background-color:#088A08;
 border:none;
 width:150px;
 height:40px;
 color:white;
 border-radius:3px;
 border-bottom:3px solid #0B610B;
}

That's all, this is how to create animated progress bar using jQuery and CSS.You can customize this code further as per your requirement. And please feel free to give comments on this tutorial.

Join Us With Our 21000+ Subscribers And Get Our Latest Tutorials Update Via Email