pbar
Version:
Tiny progress bar widget in css and js es5
25 lines (19 loc) • 1.27 kB
HTML
<html><head>
<script defer src="../dist/pbar.es5.min.js" type="text/javascript"></script>
<script type="text/javascript">
var pbar, pb;
var pb;
window.onload = function() { // when the page loads
pbar = require('pbar').pbar; // load the library
pb = new pbar({color:'red', value:'0%'}); // make a new progress bar, initially red and empty
pb.value = '20%'; // immediately animate to 20%
}
window.setTimeout(function() { // when the timeout fires
pb.color = '#aa0'; // change the color to dark yellow
pb.value = '80%'; // set the value to 80%
}, 2000); // the timeout fires in two seconds
window.setTimeout(function() { // when the timeout fires
pb.color = 'green'; // change the color to green
pb.value = '100%'; // set the value to 100%
}, 4000); // the timeout fires in four seconds
</script></head><body></body></html>