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

  • By
    7 Essential JavaScript Functions

    I remember the early days of JavaScript where you needed a simple function for just about everything because the browser vendors implemented features differently, and not just edge features, basic features, like addEventListener and attachEvent.  Times have changed but there are still a few functions each developer should...

  • By
    Interview with a Pornhub Web Developer

    Regardless of your stance on pornography, it would be impossible to deny the massive impact the adult website industry has had on pushing the web forward. From pushing the browser's video limits to pushing ads through WebSocket so ad blockers don't detect them, you have...

Incredible Demos

  • By
    jQuery Countdown Plugin

    You've probably been to sites like RapidShare and MegaUpload that allow you to download files but make you wait a specified number of seconds before giving you the download link. I've created a similar script but my script allows you to animate the CSS font-size...

  • By
    Simple Image Lazy Load and Fade

    One of the quickest and easiest website performance optimizations is decreasing image loading.  That means a variety of things, including minifying images with tools like ImageOptim and TinyPNG, using data URIs and sprites, and lazy loading images.  It's a bit jarring when you're lazy loading images and they just...

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!