How to Animated progress bar using jquery, HTML and CSS

In this tutorial we will show you how to create a simple progress bar using jQuery, HTML and CSS. Progress bars are really useful to indicate to user that something happens and when it will be approximately done.

HTML Code

<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>

CSS Code

<style>
    #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;
    }
</style>

jQuery Code

<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>