Progress Bars

Beauter can show your progress with beautiful bars.

Use progress class to create a progress bar element. Inside which, use -bar class to create the bar itself, and -label class to add a label to the bar.

<div class="progressbar _round">
  <div class="-bar _primary _round" style="width:80%">
  </div>
</div>

<div class="progressbar _dark">
  <div class="-bar _danger" style="width:50%">
  <div class="-label">50%</div>
  </div>
</div>

<div class="progressbar _box">
  <div class="-bar _box _warning" style="width:30%">
  <div class="-label">step 1</div>
  </div>
</div>

<div id="myProgress" class="progressbar">
  <div id="myBar" class="-bar">
  <div id="mylabel" class="-label">10%</div>
  </div>
</div>
<br>

<button onclick="move()">Click Me</button>

<script>
function move() {
    var elem = document.getElementById("myBar");
    var width = 10;
    var id = setInterval(frame, 10);
    function frame() {
        if (width >= 100) {
            clearInterval(id);
        } else {
            width++;
            elem.style.width = width + '%';
            document.getElementById("mylabel").innerHTML = width * 1 + '%';
        }
    }
}
</script>