Responsive Animated Progress Bar With jQuery And CSS3 - Barfiller.js
File Size: | 5.84 KB |
---|---|
Views Total: | 22172 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Barfiller.js is a jQuery plugin which uses CSS3 transitions to fill horizontal bars with percentage values you specify. It will auto re-animate on window resize to fit any screen sizes. Also can be used as a horizontal bar chart.
How to use it:
1. First you need to load both jQuery library and the Barfiller.js script in your webpage.
<script src="//code.jquery.com/jquery-3.1.0.slim.min.js"></script> <script src="js/jquery.barfiller.js"></script>
2. Create the html for the progress bar and specify the percentage to present using data-percentage
attribute.
<div id="bar1" class="barfiller"> <div class="tipWrap"> <span class="tip"></span> </div> <span class="fill" data-percentage="50"></span> </div>
3. Add the following CSS styles to the webpage.
.barfiller { width: 100%; height: 12px; background: #fcfcfc; border: 1px solid #ccc; position: relative; margin-bottom: 20px; box-shadow: inset 1px 4px 9px -6px rgba(0,0,0,.5); -moz-box-shadow: inset 1px 4px 9px -6px rgba(0,0,0,.5); } .barfiller .fill { display: block; position: relative; width: 0px; height: 100%; background: #333; z-index: 1; } .barfiller .tipWrap { display: none; } .barfiller .tip { margin-top: -30px; padding: 2px 4px; font-size: 11px; color: #fff; left: 0px; position: absolute; z-index: 2; background: #333; } .barfiller .tip:after { border: solid; border-color: rgba(0,0,0,.8) transparent; border-width: 6px 6px 0 6px; content: ""; display: block; position: absolute; left: 9px; top: 100%; z-index: 9 }
4. Call the plugin on the top element and done.
$('#bar1').barfiller();
5. Config the plugin with the following settings.
$('#bar1').barfiller({ // color of bar barColor: '#16b597', // shows a tooltip tooltip: true, // duration in ms duration: 1000, // re-animate on resize animateOnResize: true, // custom symbol symbol: "%" });
Change log:
2017-04-04
- Adding "symbol" setting.
This awesome jQuery plugin is developed by 9bitStudios. For more Advanced Usages, please check the demo page or visit the official website.