tinyProgressbar — JS progressbar library
tinyProgressbar is an extremely tiny (640 bytes minified+gzipped) Javascript progressbar library. It renders nice, flat progressbars fully customizable with CSS. It can display absolute values (eg: 25/300) or percentages (eg: 5%) on a progressbar. It also animates progression using CSS transitions.
Some progressbar properties can be set using data attributes in HTML, or manipulated directly with Javascript.
Demo
Usage
Include scripts in the <head>
<link rel="stylesheet" type="text/css" href="path/tinyprogressbar.css"/> <script type="text/javascript" src="path/tinyprogressbar.js"></script>
Add the container to be rendered as the progress bar
<p id="progress" data-min="0" data-max="200" data-mode="absolute"> </p> // OR -> data attributes are optional. They can be manipulated with Javascript <p id="progress"> </p>
Initialize and use
<script> // initialize var bar = new tinyProgressbar(document.getElementById("progress")); // set min and max values from javascript (or use data attribute in the HTML) bar.setMinMax(0, 100); // set the mode (absolute = absolute numbers, percentage = percentage value %) // or use data-mode to set it in HTML bar.setMode("percentage"); // that's it! move the bar bar.progress(30); </script>