Progress Bar Using Mootools

One of the most important things, from a usability point of view, is to know what percentage of a task is complete. I’ve developed a customizable MooTools
progress bar class that “moves” to the desired value. In this post, I describe all the methods provided by this class.

View Demo Download*

*MooTools required and not included in the download

Methods

Constructor

Initializes the progress bar object.

Syntax:

var progressBar = new TJProgressBar(element[, options]);

Arguments:

1.- element – (mixed) An Element or the string id of an Element where the progress bar will be inserted.

2.- options – (object, optional) The options described below:

createOnLoad – (boolean)  If set to true, the progress bar will be created automatically when the page loads.

isPersistent – (boolean) If set to true, the progress bar status will be stored in a cookie.

direction – (string) Direction of the progress bar. Can be “asc” or “desc”.

totalTime – (number, boolean) Time interval, in seconds, between the initial and final states. If false, no time will be used.

step – (number, boolean) The width in pixels that will be increased/decreased from the width of the progress bar. If false, this value will be calculated automatically.

timeBetweenCalls – (number) Time interval, in seconds, between each update of the progress bar. If no value is supplied, then 1 second will be used.

animation – (object, boolean) Object with the value of the duration of the animation, when increasing/decreasing the progress bar. If set to false, no animation will be used.

length – (number) Length of the background.

classNames – (object) Object with the CSS class names for the background and the progress bar itself.

start()

Starts the progress bar.

Syntax:

progressBar.start();

createProgressBar()

Creates all required HTML elements.

Syntax:

progressBar.createProgressBar();

stepTo()

Steps to the passed value.

Syntax:

progressBar.stepTo(value);

Arguments:

1.- value – (number) Value to step to.

play()

Starts playing the progress bar from the current point.

Syntax:

progressBar.play([fireEvent]);

Arguments:

1.- fireEvent – (boolean, optional) If set to false, then the onPlay event won’t be fired.

pause()

Pauses the progress bar in the current point.

Syntax:

progressBar.pause([fireEvent]);

Arguments:

1.- fireEvent – (boolean, optional) If set to false, then the onPause event won’t be fired.

stop()

Stops the progress bar and resets its value.

Syntax:

progressBar.stop([fireEvent]);

Arguments:

1.- fireEvent – (boolean, optional) If set to false, then the onStop event won’t be fired.

reset()

Resets the progress bar.

Syntax:

progressBar.reset([fireEvent]);

Arguments:

1.- fireEvent – (boolean, optional) If set to false, then the onReset event won’t be fired.

restart()

Restarts the progress bar.

Syntax:

progressBar.restart([fireEvent]);

Arguments:

1.- fireEvent – (boolean, optional) If set to false, then the onRestart event won’t be fired.

getCurrentValue()

Returns the current value of the progress bar.

Syntax:

progressBar.getCurrentValue();

Returns:

value – (object) Object with the current value of the progress bar. This object contains both values: current and percentage.

Events

create

(function) Function to execute when the progress bar is initialized.

Signature:

onCreate()

ready

(function) Function to execute when the progress bar is ready (i. e. created and added to the DOM).

Signature:

onReady()

step

(function) Function to execute when the progress bar steps to a given value.

Signature:

onStep(currentValue)

pause

(function) Function to execute when the progress bar is paused.

Signature:

onPause()

play

(function) Function to execute when the progress bar starts playing.

Signature:

onPlay()

stop

(function) Function to execute when the progress bar is stopped.

Signature:

onStop()

reset

(function) Function to execute when the progress bar is reset.

Signature:

onReset()

restart

(function) Function to execute when the progress bar is restarted.

Signature:

onRestart()

finished

(function) Function to execute when the progress bar finished its execution.

Signature:

onFinished()

javascript, mootools, web