Blog / Home
About
Media Gallery

Welcome
to
Thronic.com

ժʝ_

JavaScript ASCII Loading Indicator


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

Main code
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="ascii_loading_indicator()">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.


Original Post: Jan 26th, '22 21:46 CET.
Updated: Jan 26th, '22 21:49 CET.

JS
π