Saturday 23 April 2016

Create Simple Progress bar using css with jquery

           ,      1 comment   


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.


Online Demo




Create Simple Progress bar using css with jquery






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:50px;  
  display:block;  
  background-color:#33cc33;  
  border-radius:3px;  
  width:0;  
  transition: width 500ms ease-in-out;  
 }  
 </style>  
 <script>  
 $(document).ready(function(){
  $('#start').click(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 />
   <h3 align="center">Create Simple Progress bar using css with jquery</h3>
   <br />
   <div class="progress-bar">  
    <span class="progress-bar-fill"></span>  
   </div>  
   <br /><br />
   <button type="button" name="start" id="start" style="padding:8px 16px;">Start</button>
   <br /><br />
  </div>  
 </body>  
</html>

1 comment: