Author: | AshD93 |
---|---|
Views Total: | 1,627 views |
Official Page: | Go to website |
Last Update: | August 27, 2015 |
License: | MIT |
Preview:

Description:
Help you visualize percentage value into an animated indicator bar, made using html5, CSS and vanilla JavaScript.
How to use it:
Specify the percentage for the progress indicator using Html5 data-percent attribute.
<div class="progress-bar" data-percent="50%"> <span class="progress-bar__slide"></span> <span class="progress-bar__percent"></span> </div>
Style the progress indicator.
.progress-bar { overflow: hidden; position: relative; width: 100%; height: 1.4rem; display: block; margin: 10vh auto; background: rgba(0,0,0,0.1); } .progress-bar__slide { position: absolute; top: 0; left: 0; bottom: 0; display: block; background-image: repeating-linear-gradient( 45deg, #ccc, #ccc 10px, #eee 10px, #eee 20px ); width: 2px; transition: 2s cubic-bezier(.57, .12, .35, 1.2); } .progress-bar__percent { z-index: 500; display: block; padding: 0 10px; font-family: 'verdana'; font-size: 12px; text-align: center; line-height: 1.4rem; color: white; position: absolute; }
The JavaScript to active the progress indicator.
setTimeout(function() { var bars = document.getElementsByClassName('progress-bar'); for (var i = 0; i < bars.length; i++) { bars[i].children[0].style.width = bars[i].dataset.percent; bars[i].children[1].innerHTML = bars[i].dataset.percent; }; }, 0);