Sunday, February 7, 2016

javascript slim progressbar



Step : 1 HTML
 
Step : 2 CSS
 
#progress-bar {
  width: 100%;
  height: 3px;
  position: relative;
  background-color: #ccc;
}

#progress {
  background-color: #1CA361;
  width: 20px;
  height: 3px;
  position: absolute;
}
Step : 3 Javascript
 
function showProgress() {
  var progressBar = document.getElementById("progress");   
  var width = 0;
  var id = setInterval(progCount, 18);
  function progCount() {
    if (width == 100) {
      clearInterval(id);
    } else {
      width++; 
      progressBar.style.width = width + '%'; 
    }
  }
}

4 comments:

  1. In here, he keeps the pace constantly quick, constantly throws a crazy scenario to pit our heroes in, and never gives you a chance to breathe and realize how preposterous this movie really is. la web design

    ReplyDelete
  2. This design is wicked! You most certainly know how to keep a reader amused. Between your wit and your videos, I was almost moved to start my own blog (well, almost…HaHa!) Great job. I really loved what you had to say, and more than that, how you presented it. Too cool! web design agencies los angeles

    ReplyDelete
  3. The article posted was very informative and useful. You people are doing a great job. Keep going. web design agency

    ReplyDelete

Copyright © www.sureshsharma.info All rights reserved