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. You may also like How to Create File Upload Progress Bar Using jQuery and PHP. and How to get AM/PM from a datetime in PHP

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>