lsauer/textanim.html

## textanim.html
<html><head></head><body>
  <div id="timer">◉</div>
</body></html>

## textanim.js
// www.lsauer.com 2012
// character animations based on various sequences of similar characters with geometric shapes

//check:
document.querySelector('#timer').outerHTML
//>"<div id="timer">◉</div>"
(function()
{
var cnt=0
   ,charanim1 =  ['&#x25D4;', '&#x25D2;', '&#x25D5;', '&#x25CF;']  //semi-filled circles
   ,charanim2 =  ['&#x25C9;', '&#x25CE;', '&#x25CD;', '&#x25CF;', '&#x25CC;', '&#x25CB;']  //Circles
   ,charanimsq = ['&#x25A4;', '&#x25A5;', '&#x25A6;', '&#x25A7;', '&#x25A8;', '&#x25A9;'] //Squares
   ,quarcsani =  ['&#x25DC;','&#x25DD;','&#x25DE;','&#x25DF;'] //quarter arcs
   ,trgnani =    ["&#x25EC;", "&#x25ED;", "&#x25EE;"]  //triangles, looks good w. a 100msec interval
// See: http://en.wikipedia.org/wiki/Geometric_Shapes
var setAnimation = function(a, tm){
  setInterval( function(){document.querySelector('#timer').innerHTML = a[cnt++%a.length];}, tm );
}
setAnimation(charanimsq, 200);
}).call(this);

//clear all timers
var clearTimers = function(){ for(var i=0;i<1000;window.clearInterval(i++)); }
	<html><head></head><body>
	<div id="timer">◉</div>
	</body></html>
	// www.lsauer.com 2012
	// character animations based on various sequences of similar characters with geometric shapes

	//check:
	document.querySelector('#timer').outerHTML
	//>"<div id="timer">◉</div>"
	(function()
	{
	var cnt=0
	,charanim1 = ['◔', '◒', '◕', '●'] //semi-filled circles
	,charanim2 = ['◉', '◎', '◍', '●', '◌', '○'] //Circles
	,charanimsq = ['▤', '▥', '▦', '▧', '▨', '▩'] //Squares
	,quarcsani = ['◜','◝','◞','◟'] //quarter arcs
	,trgnani = ["◬", "◭", "◮"] //triangles, looks good w. a 100msec interval
	// See: http://en.wikipedia.org/wiki/Geometric_Shapes
	var setAnimation = function(a, tm){
	setInterval( function(){document.querySelector('#timer').innerHTML = a[cnt++%a.length];}, tm );
	}
	setAnimation(charanimsq, 200);
	}).call(this);

	//clear all timers
	var clearTimers = function(){ for(var i=0;i<1000;window.clearInterval(i++)); }