Introducing MooTools Dotter

By  on  

It's best practice to provide an indicator of some sort when performing an AJAX request or processing that takes place in the background. Since the dawn of AJAX, we've been using colorful spinners and imagery as indicators. While I enjoy those images, I am a Web Developer and prefer JavaScript/text-based solutions. That's where my inspiration for MooTools Dotter came from.

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

The XHTML

<div id="dot-me-1">(Dotter will be here)</div>

Simply create a containing XHTML element that the Dotter instance will live in.

The CSS

You can style the contianer however you'd like. Dotter could care less about your styling...and that's a good thing.

The MooTools JavaScript

/* dotter */
var Dotter = new Class({
	
	/* implements */
	Implements: [Options,Events],

	/* options */
	options: {
		delay: 1000,
		dot: '.',
		message: 'Loading',
		numDots: 3,
		property: 'text',
		reset: false/*,
		onDot,
		onStart,
		onStop
		*/
	},
	
	/* 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;
		$clear(this.periodical);
		this.fireEvent('stop');
		return this;
	}
});

Options for Dotter include:

  • delay: (defaults to '1000') The speed at which the dotter show add dots.
  • dot: (defaults to '.') The character or string that you want to be the "dot."
  • message: (defaults to 'Loading') The string that preceeds the dots.
  • numDots: (defaults to 3) The number of dots to go to before clearing.
  • property: (defaults to 'text') The container's attribute to set each time. The alternative would "HTML."
  • reset: (defaults to false) Defines whether to reset the dotter text on restart.

Events for Dotter include:

  • Dot: Fires on each dot placement.
  • Start: Fires when the Dotter starts.
  • Stops: Fires when the Dotter stops.

The Usage

/* simple instance */
var myDotter = new Dotter('dot-me-1');
document.id('start').addEvent('click',function() { myDotter.start() });
document.id('stop').addEvent('click',function() { myDotter.stop() });

/* advanced usage */
var myDotter3 = new Dotter('dot-me-3',{
	periodical: 500,
	dot: '.',
	numDots: 5,
	onDot:function() {
		this.container.setStyles({
			'border-color': '#ccc',
			'background-color': '#eee'
		});
		var effect = new Fx.Morph(this.container,{
			duration: 400
		});
		effect.start({
			'background-color': '#fffea1',
			'border-color': '#fc0'
		});
	},
	onStart: function() {
		this.container.setStyle('visibility','visible');
	},
	onStop: function() {
		this.container.setStyle('visibility','hidden');
	}
});
document.id('start3').addEvent('click',function() { myDotter3.start() });
document.id('stop3').addEvent('click',function() { myDotter3.stop() });

Per usual, simply set the options and events as you wish and move on with more difficult things! Waiting on an AJAX response (onRequest) is a prefect scenario to use Dotter.

Who needs imagery to build an indicator? Simply use Dotter! Any and all suggestions are welcome.

Recent Features

Incredible Demos

  • By
    Chris Coyier’s Favorite CodePen Demos IV

    Did you know you can triple-heart things on CodePen? We’ve had that little not-so-hidden feature forever. You can click that little heart button on any Pen (or Project, Collection, or Post) on CodePen to show the creator a little love, but you can click it again...

  • By
    Spyjax:  Ajax For Evil Using Dojo

    The idea of Spyjax is nothing new. In pasts posts I've covered how you can spy on your user's history with both MooTools and jQuery. Today we'll cover how to check user history using the Dojo Toolkit. The HTML For the sake of this...

Discussion

  1. artmania

    hey it is cool! thanks :D

  2. looks like mootools has changed quite a bit since I last worked with it a year ago. Thanks for this helpful little class. One question, could you explain what the Implements property does? I understand interfaces in OO, but don’t quite get it here. Thanks again!

  3. Another useful tutorial! thanks again!

  4. emehrkay

    Cool, I needed one of these…

    Thanks

  5. Geat! Very useful!! Thanks for share!!

  6. Great post, this will be very useful. Thanks for sharing.

  7. Thankx for sharing this little gem, David! We used the Dotter for a simple twitter geolocation mashup. It’s a great way for setting up a nice progress indicator on mobile Safari and the Android Browser as they cannot display animated gifs… Keep up the good work!

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!