Saturday, 23 April 2016

Create Simple Progress bar using css with jquery



How to create simple progress bar using css with jquery, you can learn this things in this post. In css part I have use transition effect for increase width of span tag very smoothly and In Jquery I have use setInterval() method for increase width of span tag and if width greater than 100% than at that time I have use clearInterval() method for clear the interval timer set by setInterval() method.

Source Code

 <!DOCTYPE html>  
 <html>  
      <head>  
           <title>Webslesson Tutorial | Progress bar using CSS and Jquery</title>  
           <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>  
           <style>  
           .wrapper{  
                width:500px;  
                margin:0 auto;  
           }  
           .progress-bar{  
                width:100%;  
                background-color:#e0e0e0;  
                padding:3px;  
                border-radius:3px;  
           }  
           .progress-bar-fill{  
                height:22px;  
                display:block;  
                background-color:#33cc33;  
                border-radius:3px;  
                width:0;  
                transition: width 500ms ease-in-out;  
           }  
           </style>  
           <script>  
           $(document).ready(function(){  
                var size = 0;  
                var interval = setInterval(function(){  
                     size = size + 10;  
                     $('.progress-bar-fill').css('width', size + '%');  
                     if(size >= 100)  
                     {  
                          clearInterval(interval);  
                     }  
                }, 1000);  
           });  
           </script>  
      </head>  
      <body>  
           <div class="wrapper">  
                <br />  
                <div class="progress-bar">  
                     <span class="progress-bar-fill"></span>  
                </div>  
                <br />  
           </div>  
      </body>  
 </html>  

2 comments: