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 + '%'; 
    }
  }
}

No comments:

Post a Comment

Copyright © www.sureshsharma.info All rights reserved