Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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>
@eliperelman

This comment has been minimized.

Copy link

@eliperelman eliperelman commented Aug 16, 2011

Officially the best script I've seen all day!

@atk

This comment has been minimized.

Copy link

@atk atk commented Aug 16, 2011

and thanks to utf-8 we can replace the spinner characters part with:

"╀┾╁┽"
"▛▜▟▙"
"◤◥◢◣"
"◒◐◓◑"

or similar :-) - Great job, jed!

@Idered

This comment has been minimized.

Copy link

@Idered Idered commented Aug 16, 2011

Great script !
You can look for spinner characters on this site http://www.sciweavers.org/i2symbol

@nikola

This comment has been minimized.

Copy link

@nikola nikola commented Aug 16, 2011

Alternative set: "◜◝◞◟"

For smoother animation, change 4 to 6 and use these: "◜◠◝◞◡◟"

@Dottenpixel

This comment has been minimized.

Copy link

@Dottenpixel Dottenpixel commented Aug 17, 2011

brilliant! using the pie unicode glyphs is awesome.

@tkissing

This comment has been minimized.

Copy link

@tkissing tkissing commented Nov 10, 2011

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

@atk

This comment has been minimized.

Copy link

@atk 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