Documentation

Everything you can do with Beauter


Progress Bars


Beauter can show your progress with beautiful bars.

base
progressbar
object
-bar
-label
Example
<div class="progressbar _round">
  <div class="-bar _primary _round" style="width:80%">
  </div>
</div>
<br>
<div class="progressbar _dark">
  <div class="-bar _danger" style="width:50%">
  <div class="-label">50%</div>
  </div>
</div>
<br>
<div class="progressbar _box">
  <div class="-bar _box _warning" style="width:25%">
  <div class="-label">25%</div>
  </div>
</div>
Result

50%

25%

Dynamic
10%

<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>


News

  • New 'Examples' section coming with wonderful tutorials!
  • Adding animations and transitions effects soon.
  • 0.3 development started. Join us here.

Get Involved

Your contribution can make beauter more beautiful. Visit Github to collaborate.

Star Fork

Sitemap Designed with by Shubham Ramdeo
Follow @ramdeoshubham
outboxcraft logoOutboxcraft
© 2017