├── css └── style.css ├── README.md ├── index.html └── js └── jquery.barfiller.js /css/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: Arial; 3 | background:#eee; 4 | } 5 | 6 | .barfiller { 7 | width:100%; 8 | height:12px; 9 | background:#fcfcfc; 10 | border:1px solid #ccc; 11 | position:relative; 12 | margin-bottom:20px; 13 | box-shadow: inset 1px 4px 9px -6px rgba(0,0,0,.5); 14 | -moz-box-shadow: inset 1px 4px 9px -6px rgba(0,0,0,.5); 15 | } 16 | 17 | .barfiller .fill { 18 | display:block; 19 | position:relative; 20 | width:0px; 21 | height:100%; 22 | background:#333; 23 | z-index:1; 24 | } 25 | 26 | .barfiller .tipWrap { 27 | display:none; 28 | } 29 | 30 | .barfiller .tip { 31 | margin-top:-30px; 32 | padding:2px 4px; 33 | font-size:11px; 34 | color:#fff; 35 | left:0px; 36 | position:absolute; 37 | z-index:2; 38 | background: #333; 39 | } 40 | 41 | .barfiller .tip:after { 42 | border:solid; 43 | border-color:rgba(0,0,0,.8) transparent; 44 | border-width:6px 6px 0 6px; 45 | content:""; 46 | display:block; 47 | position:absolute; 48 | left:9px; 49 | top:100%; 50 | z-index:9 51 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | Barfiller.js 2 | ========= 3 | 4 | A simple jQuery plugin that gives you percentage-based animated bar filling... 5 | 6 | [View Demo](http://9bitstudios.github.io/barfiller/) | [Buy Author a Beer at the Bar](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=NNCJ79B2W6MUL) 7 | 8 | ### How to Use 9 | 10 | Set up some HTML like the following... 11 | 12 | ```html 13 |
14 | 15 | 16 |
17 | ``` 18 | 19 | And then call Barfiller on it... 20 | 21 | ```javascript 22 | $(document).ready(function(){ 23 | $('#bar1').barfiller(); 24 | }); 25 | ``` 26 | 27 | The data-percentage attribute is what sets the percentage that the bar animates to. 28 | 29 | ### Options 30 | 31 | Below are some options that you can pass in to Barfiller... 32 | 33 | | Option | Value | Default Value | Description | Example | 34 | | --- | --- | --- | --- | --- | 35 | barColor | String (Hex value) | #16b597 | Sets the color of the animating fill bar | barColor: "#990000" 36 | tooltip | Boolean | true | Sets whether or not to show the tooltip above the animating bar | tooltip: false 37 | duration | Integer (in milliseconds) | 1000 | Sets the amount of time the fill animation takes in milliseconds | duration: 500 38 | animateOnResize | Boolean | true | Sets whether or not to redo the animation when the user resizes the window or switches device views | animateOnResize: false 39 | symbol | String | % | Allows you to set the symbol used in tooltips | symbol: "" 40 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | Barfiller jQuery Plugin | 9bit Studios 11 | 12 | 13 | 14 | 15 | 16 | 17 |

Barfiller

18 | 19 |

A simple jQuery plugin that gives you percentage-based animated bar filling...

20 | 21 |
22 |
23 | 24 |
25 | 26 |
27 | 28 |
29 |
30 | 31 |
32 | 33 |
34 | 35 |

You can set different colors...

36 | 37 |
38 |
39 | 40 |
41 | 42 |
43 | 44 |

And you can set different durations....

45 | 46 |
47 |
48 | 49 |
50 | 51 |
52 | 53 |

Reanimates on browser/device resize too!

54 | 55 | 56 | 57 | 58 | 70 | 71 | 74 | 75 | 77 | 81 | 82 | 83 | -------------------------------------------------------------------------------- /js/jquery.barfiller.js: -------------------------------------------------------------------------------- 1 | /* 2 | * File: jquery.barfiller.js 3 | * Version: 1.0.1 4 | * Description: A plugin that fills bars with a percentage you set. 5 | * Author: 9bit Studios 6 | * Copyright 2012, 9bit Studios 7 | * http://www.9bitstudios.com 8 | * Free to use and abuse under the MIT license. 9 | * http://www.opensource.org/licenses/mit-license.php 10 | */ 11 | 12 | (function ($) { 13 | 14 | $.fn.barfiller = function (options) { 15 | 16 | var defaults = $.extend({ 17 | barColor: '#16b597', 18 | tooltip: true, 19 | duration: 1000, 20 | animateOnResize: true, 21 | symbol: "%" 22 | }, options); 23 | 24 | 25 | /****************************** 26 | Private Variables 27 | *******************************/ 28 | 29 | var object = $(this); 30 | var settings = $.extend(defaults, options); 31 | var barWidth = object.width(); 32 | var fill = object.find('.fill'); 33 | var toolTip = object.find('.tip'); 34 | var fillPercentage = fill.attr('data-percentage'); 35 | var resizeTimeout; 36 | var transitionSupport = false; 37 | var transitionPrefix; 38 | 39 | /****************************** 40 | Public Methods 41 | *******************************/ 42 | 43 | var methods = { 44 | 45 | init: function() { 46 | return this.each(function () { 47 | if(methods.getTransitionSupport()) { 48 | transitionSupport = true; 49 | transitionPrefix = methods.getTransitionPrefix(); 50 | } 51 | 52 | methods.appendHTML(); 53 | methods.setEventHandlers(); 54 | methods.initializeItems(); 55 | }); 56 | }, 57 | 58 | /****************************** 59 | Append HTML 60 | *******************************/ 61 | 62 | appendHTML: function() { 63 | fill.css('background', settings.barColor); 64 | 65 | if(!settings.tooltip) { 66 | toolTip.css('display', 'none'); 67 | } 68 | toolTip.text(fillPercentage + settings.symbol); 69 | }, 70 | 71 | 72 | /****************************** 73 | Set Event Handlers 74 | *******************************/ 75 | setEventHandlers: function() { 76 | if(settings.animateOnResize) { 77 | $(window).on("resize", function(event){ 78 | clearTimeout(resizeTimeout); 79 | resizeTimeout = setTimeout(function() { 80 | methods.refill(); 81 | }, 300); 82 | }); 83 | } 84 | }, 85 | 86 | /****************************** 87 | Initialize 88 | *******************************/ 89 | 90 | initializeItems: function() { 91 | var pctWidth = methods.calculateFill(fillPercentage); 92 | object.find('.tipWrap').css({ display: 'inline' }); 93 | 94 | if(transitionSupport) 95 | methods.transitionFill(pctWidth); 96 | else 97 | methods.animateFill(pctWidth); 98 | }, 99 | 100 | getTransitionSupport: function() { 101 | 102 | var thisBody = document.body || document.documentElement, 103 | thisStyle = thisBody.style; 104 | var support = thisStyle.transition !== undefined || thisStyle.WebkitTransition !== undefined || thisStyle.MozTransition !== undefined || thisStyle.MsTransition !== undefined || thisStyle.OTransition !== undefined; 105 | return support; 106 | }, 107 | 108 | getTransitionPrefix: function() { 109 | if(/mozilla/.test(navigator.userAgent.toLowerCase()) && !/webkit/.test(navigator.userAgent.toLowerCase())) { 110 | return '-moz-transition'; 111 | } 112 | if(/webkit/.test(navigator.userAgent.toLowerCase())) { 113 | return '-webkit-transition'; 114 | } 115 | if(/opera/.test(navigator.userAgent.toLowerCase())) { 116 | return '-o-transition'; 117 | } 118 | if (/msie/.test(navigator.userAgent.toLowerCase())) { 119 | return '-ms-transition'; 120 | } 121 | else { 122 | return 'transition'; 123 | } 124 | }, 125 | 126 | getTransition: function(val, time, type) { 127 | 128 | var CSSObj; 129 | if(type === 'width') { 130 | CSSObj = { width : val }; 131 | } 132 | else if (type === 'left') { 133 | CSSObj = { left: val }; 134 | } 135 | 136 | time = time/1000; 137 | CSSObj[transitionPrefix] = type+' '+time+'s ease-in-out'; 138 | return CSSObj; 139 | 140 | }, 141 | 142 | refill: function() { 143 | fill.css('width', 0); 144 | toolTip.css('left', 0); 145 | barWidth = object.width(); 146 | methods.initializeItems(); 147 | }, 148 | 149 | calculateFill: function(percentage) { 150 | percentage = percentage * 0.01; 151 | var finalWidth = barWidth * percentage; 152 | return finalWidth; 153 | }, 154 | 155 | transitionFill: function(barWidth) { 156 | 157 | var toolTipOffset = barWidth - toolTip.width(); 158 | fill.css( methods.getTransition(barWidth, settings.duration, 'width')); 159 | toolTip.css( methods.getTransition(toolTipOffset, settings.duration, 'left')); 160 | 161 | }, 162 | 163 | animateFill: function(barWidth) { 164 | var toolTipOffset = barWidth - toolTip.width(); 165 | fill.stop().animate({width: '+=' + barWidth}, settings.duration); 166 | toolTip.stop().animate({left: '+=' + toolTipOffset}, settings.duration); 167 | } 168 | 169 | }; 170 | 171 | if (methods[options]) { // $("#element").pluginName('methodName', 'arg1', 'arg2'); 172 | return methods[options].apply(this, Array.prototype.slice.call(arguments, 1)); 173 | } else if (typeof options === 'object' || !options) { // $("#element").pluginName({ option: 1, option:2 }); 174 | return methods.init.apply(this); 175 | } else { 176 | $.error( 'Method "' + method + '" does not exist in barfiller plugin!'); 177 | } 178 | }; 179 | 180 | })(jQuery); --------------------------------------------------------------------------------