ProgressBar

ProgressBar is a highly customizable MooTools progress bar class that animates to the desired percentage and can be styled in any manner by CSS.

Plugin Code (Version 3.0)

var ProgressBar = new Class({
	
	//implements
	Implements: [Events, Options],

	//options
	options: {
		container: document.body,
		boxID:'progress-bar-box-id',
		percentageID:'progress-bar-percentage-id',
		displayID:'progress-bar-display-id',
		startPercentage: 0,
		displayText: false,
		speed:10,
		step:1,
		allowMore: false
	},
	
	//initialization
	initialize: function(options) {
		//set options
		this.setOptions(options);
		//quick container
		this.options.container = $(this.options.container);
		//create elements
		this.createElements();
	},
	
	//creates the box and percentage elements
	createElements: function() {
		var box = new Element('div', { 
			id:this.options.boxID 
		});
		var perc = new Element('div', { 
			id:this.options.percentageID, 
			'style':'width:0px;' 
		});
		perc.inject(box);
		box.inject(this.options.container);
		if(this.options.displayText) { 
			var text = new Element('div', { 
				id:this.options.displayID 
			});
			text.inject(this.options.container);
		}
		this.set(this.options.startPercentage);
	},
	
	//calculates width in pixels from percentage
	calculate: function(percentage) {
		return ($(this.options.boxID).getStyle('width').replace('px','') * (percentage / 100)).toInt();
	},
	
	//animates the change in percentage
	animate: function(go) {
		var run = false;
		var self = this;
		if(!self.options.allowMore && go > 100) { 
			go = 100; 
		}
		self.to = go.toInt();
		$(self.options.percentageID).set('morph', { 
			duration: this.options.speed,
			link:'cancel',
			onComplete: function() {
				self.fireEvent('change',[self.to]);
				if(go >= 100)
				{
					self.fireEvent('complete',[self.to]);
				}
			}
		}).morph({
			width:self.calculate(go)
		});
		if(self.options.displayText) { 
			$(self.options.displayID).set('text', self.to + '%'); 
		}
	},
	
	//sets the percentage from its current state to desired percentage
	set: function(to) {
		this.animate(to);
	},
	
	//steps a pre-determined percentage
	step: function() {
		this.set(this.to + this.options.step);
	}
	
});

/* sample usage */
//once the DOM is ready
window.addEvent('domready', function() {
	
	//create the progress bar for example 1
	pb2 = new ProgressBar({
		container: $('put-bar-here2'),
		startPercentage: 10,
		speed:1000,
		boxID: 'box2',
		percentageID: 'perc2',
		displayID: 'text',
		displayText: true,
		step:15,
		onComplete: function() {
			alert('Done!');
		},
		onChange: function() {
			alert('Changed!');
		}
	});
	
	//movers
	$$('.mover2').each(function(el) {
		el.addEvent('click',function(e) {
			e.stop();
			pb2.set(el.get('rel'));
		});
	});
	
	//steppers
	$$('.stepper').each(function(el) {
		el.addEvent('click',function(e) {
			e.stop();
			pb.step();
		});
	});
});

XHTML Menu Format

<div id="put-bar-here"></div>

Options & Events

• container: (defaults to the document body) the element which will contain the progress bar.
• boxID: (defaults to 'progress-bar-box-id') the ID of the element that holds the progress image/background. This element is generated so simply pass in a string to be used.
• percentageID: (defaults to 'progress-bar-percentage-id') the ID of the element that IS the progress image/background. This element is generated so simply pass in a string to be used.
• displayID: (defaults to 'progress-bar-display-id') the ID of the element that holds the percentage text. This element is generated so simply pass in a string to be used.
• startPercentage: (defaults to 0) the percentage's starting value
• displayText: (defaults to false) a Boolean setting for whether or not you'd like the text value of the progress bar to be displayed
• speed: (defaults to 10) the speed at which you'd like the progress bar's percentage movement to move
• step: (defaults to 1) the percentage to step if no value is given
• allowMore: (defaults to false) allow the progress bar to be more than 100%?
• onChange: a function to execute when the progress bar percentage changes
• onComplete: a function to execute when the progress bar reaches 100% (or more)

Methods

There are no public methods.

Code Revisions & Bug Fixes

None.