Skip to content

Instantly share code, notes, and snippets.

@jed

jed/LICENSE.txt

Forked from 140bytes/LICENSE.txt
Created August 15, 2011 16:10
Show Gist options
  • Save jed/1147076 to your computer and use it in GitHub Desktop.
Save jed/1147076 to your computer and use it in GitHub Desktop.
Download ZIP
an animated loading DOM spinner
Raw
annotated.js
// 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
}
Raw
index.js
function(a){function b(){a.innerHTML="◴◷◶◵".charAt(b=-~b%4)};setInterval(b,250/(a||1));b(a=document.createElement("b"));return a}
Raw
LICENSE.txt
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.
Raw
package.json
{
"name": "spinner",
"description": "An animated loading DOM spinner.",
"keywords": [
"animated",
"loading",
"DOM",
"spinner"
]
}
Raw
test.html
<!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
Copy link

Officially the best script I've seen all day!

@atk
Copy link

atk commented Aug 16, 2011

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

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

or similar :-) - Great job, jed!

@Idered
Copy link

Idered commented Aug 16, 2011

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

@nikola
Copy link

nikola commented Aug 16, 2011

Alternative set: "◜◝◞◟"

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

@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