Dotter is a plugin that allows you to create XHTML-based, periodical indicators quickly and easily.

MooTools Javascript Class

/*
---
description:     Dotter

authors:
  - David Walsh (http://davidwalsh.name)

license:
  - MIT-style license

requires:
  core/1.2.1:   '*'

provides:
  - Dotter
...
*/
var Dotter = new Class({

	/* implements */
	Implements: [Options,Events],

	/* options */
	options: {
		delay: 1000,
		dot: '.',
		message: 'Loading',
		numDots: 3,
		property: 'text',
		reset: false/*,
		onDot: $empty,
		onStart: $empty,
		onStop: $empty
		*/
	},

	/* initialization */
	initialize: function(container,options) {
		/* set options */
		this.setOptions(options);
		this.container = document.id(container);
		this.dots = 0;
		this.running = false;
	},

	/* adds dot */
	dot: function() {
		if(this.running) {
			var text = this.container.get(this.options.property);
			this.dots++;
			this.container.set(this.options.property,(this.dots % this.options.numDots != 0 ? text : this.options.message) + '' + this.options.dot);
		}
		return this;
	},

	/* loads or resets the dotter */
	load: function() {
		this.loaded = true;
		this.dots = 0;
		this.dotter = function(){ this.dot(); this.fireEvent('dot'); }.bind(this);
		this.periodical = this.dotter.periodical(this.options.delay);
		this.container.set(this.options.property,this.options.message + '' + this.options.dot);
		return this;
	},

	/* start the dotter */
	start: function() {
		if(!this.loaded || this.options.reset) this.load();
		this.running = true;
		this.fireEvent('start');
		return this;
	},

	/* stop the dotter */
	stop: function() {
		this.running = this.loaded = false;
		clearInterval(this.periodical);
		this.fireEvent('stop');
		return this;
	}
});

Class: Dotter

Implements:

Options, Events

Dotter Method: constructor

Syntax:

var myDotter = new Dotter(container, options);

Arguments:

1. container - (string) The ID of the container which will hold the Dotter text.
2. options - (**) The options for the Dotter instance.

Options:

• delay - (integer, defaults to 1000) The dot addition delay.
• dot - (string, defaults to '.') The character to act as the "dot"
• message - (string, defaults to "Loading") The text to accompany the Dots.
• numDots - (integer, defaults to 3) The number of dots before resetting the dot count.
• property - (string, defaults to "text") The container element's property which will be modified with the message and dots.
• reset - (boolean, defaults to false) - Should the Dotter instance reset on every start and stop?

Dotter Method: start

Syntax:

dotter.start();

Returns:

The Dotter instance.

Dotter Method: stop

Syntax:

dotter.stop();

Returns:

The Dotter instance.

Events:

start

• (function) Function to execute when the Dotter is started.

Signature

onStart(fn)

Arguments:

1. fn - (function) The function to execute when the Dotter starts.

stop

• (function) Function to execute when the Dotter is stopped.

Signature

onStop(fn)

Arguments:

1. fn - (function) The function to execute when the Dotter stops.

dot

• (function) Function to execute on each dot.

Signature

onDot(fn)

Arguments:

1. fn - (function) The function to execute when the Dotter adds a dot.