ASCII Loading Indicator in JavaScript

A cool way to show that a webpage or an element on it is loading.

Main code
/*
	Copyright (C) 2011 Dag Jonny Nedrelid
	A JavaScript loading indicator.
*/
function vent() {
	var v = document.getElementById('clickme');
	var s = 'Loading... ';
	switch (v.innerHTML) {
	case s+'|':
		v.innerHTML = s+'/';
		break;
	case s+'/':
		v.innerHTML = s+'-';
		break;
	case s+'-':
		v.innerHTML = s+'\\';
		break;
	case s+'\\':
		v.innerHTML = s+'|';
		break;
	default:
		v.innerHTML = s+'|';
	}
	setTimeout('vent()',200);
}

Click me for an example

Code:
<span id="clickme">
	<a href="javascript:;" onclick="vent()">Click me for an example</a>
</span>


Just call this function (customize it first) on an onclick event, e.g. in a hyperlink or upload form submit to something that will take some time to complete and need an indicator.

This document was last updated June 12th, 2011.
Written by: Dag Jonny Nedrelid
©2007-2012 http://thronic.com


Feel free to leave a comment.
Name:
URL:
0