Skip to content

Instantly share code, notes, and snippets.

@jquery404
Created March 25, 2012 05:46
Show Gist options
  • Save jquery404/2191577 to your computer and use it in GitHub Desktop.
Save jquery404/2191577 to your computer and use it in GitHub Desktop.
Progressbar without BG
(function($){
// Progressbar plugins
$.fn.progBar=function(p){
var Show = (p.labelShow==undefined) ? 'false' : p.labelShow;
var type = (p.type==undefined) ? '' : p.type;
var interval = (p.interval==undefined) ? 1500 : p.interval;
$(this).addClass('progressbar-value progress-header');
$(this).animate({'width' : p.progress + '%'}, interval);
if(Show == true)
$(this).prev('label').html(p.progress + type);
};
})(jQuery);
//@ here how to call it
$('.prog2').progBar({
progress : 70,
labelShow : true,
type : '%',
interval : 1500
});
@jquery404
Copy link
Author

.progress-header { border: 1px solid #aaaaaa; background: #176277; color: #ffffff; font-weight: bold; }
.progress-header a { color: #222222; }
.progressbar { border: 1px solid #aaaaaa; background: #38312b ; color: #ffffff; height:2em; }
.progressbar .progressbar-value { margin: -1px; height:100%; width:0; }
.amount { font-size: 80%; font-weight: bold; position: absolute; padding:10px; }

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment