✖

All TalkersCode Topics

Follow TalkersCode On Social Media

✖

devloprr.com - A Social Media Network for developers Join Now ➔

Animated Progress Bar Using jQuery And CSS

Last Updated : Jul 1, 2023

IN - jQuery CSS | Written & Updated By - Anjali

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.

Animated Progress Bar Using jQuery And CSS

CHECK OUT THIS TUTORIAL LIVE DEMO →

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.

I hope this tutorial on animated progress bar helps you and the steps and method mentioned above are easy to follow and implement.

CHECK OUT THIS TUTORIAL LIVE DEMO →