jQuery Waiting Dots - A simple alternative to GIFs

Example: Click me!

// Adds dots ... while the element has the waiting class
jQuery.fn.waitingDots = function(waitingClass, maxDots, onComplete) {

	var e = $(this);
	var term = e.val() || e.text();
	e.addClass(waitingClass);

	var count = 0;
	var numDots = maxDots || 3;

	var interval = setInterval(function() {
		if (!e.hasClass(waitingClass)) {
			clearInterval(interval);
			onComplete.apply(e);
		}
		else {
			var newText = term + " .".take(count);
			e.val(newText).text(newText); // Update text
			count < numDots ? count++ : count = 0;  // Update counter
		}
	}, 400);

};

Example of Use:

$('#button').click(function(e) {
	
	var button = this;

	$(button).text("Saving ");

	setTimeout(function() {
		$(button).removeClass("waiting");		
	},5000);

	$(button).waitingDots("waiting", 4, function(e) {
		$(button).text("Yay, it worked!");
	});

	e.preventDefault();
});

Note: Requires take() function, available here.