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.

Download Debut Article Example Usage

 

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.

Comments

  1. Your work is amazing!
    I’m wondering if you published somewhere on the net an example working with Zend_Progressbar. If not, take it as a suggestion for a future post! ;-)

Be Heard

Tip: Wrap your code in <pre> tags or link to a GitHub Gist!

Use Code Editor