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.

Cloudinary

Recent Features

  • By
    CSS Filters

    CSS filter support recently landed within WebKit nightlies. CSS filters provide a method for modifying the rendering of a basic DOM element, image, or video. CSS filters allow for blurring, warping, and modifying the color intensity of elements. Let's have...

  • By
    6 Things You Didn&#8217;t Know About Firefox OS

    Firefox OS is all over the tech news and for good reason:  Mozilla's finally given web developers the platform that they need to create apps the way they've been creating them for years -- with CSS, HTML, and JavaScript.  Firefox OS has been rapidly improving...

Incredible Demos

  • By
    Parallax Sound Waves Animating on Scroll

    Scrolling animations are fun. They are fun to create and fun to use. If you are tired of bootstrapping you might find playing with scrolling animations as a nice juicy refreshment in your dry front-end development career. Let's have a look how to create animating...

  • By
    Fade Images with MooTools LazyLoad

    I recently received an email from a MooTools developer asking a great question about my LazyLoad class: "I'm using your LazyLoad MooTools plugin (which is great, by the way). I have been trying to figure out how to modify it so that once an image scrolls into...

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!