Skip to content

Instantly share code, notes, and snippets.

@jed
Forked from 140bytes/LICENSE.txt
Created August 15, 2011 16:10
Show Gist options
  • Star 13 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save jed/1147076 to your computer and use it in GitHub Desktop.
Save jed/1147076 to your computer and use it in GitHub Desktop.
an animated loading DOM spinner
// a function that returns an animated loading DOM spinner,
// which cycles from ◴ to ◷ to ◶ to ◵ and back again.
function(
a // spinner revs per second (optional)
){
function b(){ // an updater function, which
a.innerHTML = // sets the inner HTML of the spinner
"◴◷◶◵" // to one of the pie unicode glyphs:
.charAt( // particularly, the one at
b = -~b%4 // the incremented counter from 0 to 3
)
};
setInterval( // repeatedly call
b, // the updater function
250 / (a||1) // a*4 times a second
);
b( // kick the updater function off
a = document // by creating and assigning
.createElement("b") // a dummy node
);
return a // return the spinner
}
function(a){function b(){a.innerHTML="◴◷◶◵".charAt(b=-~b%4)};setInterval(b,250/(a||1));b(a=document.createElement("b"));return a}
DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
Version 2, December 2004
Copyright (C) 2011 Jed Schmidt <http://jed.is>
Everyone is permitted to copy and distribute verbatim or modified
copies of this license document, and changing it is allowed as long
as the name is changed.
DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION
0. You just DO WHAT THE FUCK YOU WANT TO.
{
"name": "spinner",
"description": "An animated loading DOM spinner.",
"keywords": [
"animated",
"loading",
"DOM",
"spinner"
]
}
<!DOCTYPE html>
<html>
<head>
<title>Spinner test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>div {font-size: 300%}</style>
</head>
<body>
<div>Spins at 1rps: <span id="spinner1"></span></div>
<div>Spins at 2rps: <span id="spinner2"></span></div>
<div>Spins at 3rps: <span id="spinner3"></span></div>
<script>
var spinner = function(a){function b(){a.innerHTML="◴◷◶◵".charAt(b=-~b%4)};setInterval(b,250/(a||1));b(a=document.createElement("b"));return a}
, i = 4
while (i-->1) document.getElementById("spinner" + i).appendChild(spinner(i))
</script>
</body>
</html>
@Dottenpixel
Copy link

brilliant! using the pie unicode glyphs is awesome.

@tkissing
Copy link

Replacing "◴◷◶◵".charAt(b=-~b%4) with ("◴◷◶◵")[b=-~b%4] works at least in FF7...

@atk
Copy link

atk commented Nov 10, 2011

It will fail in MSIE up to version 9. The good news is, I mailed my contact @microsoft and he answered that the next version of MSIE will support this shorthand for .charAt(index).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment