Skip to content

Instantly share code, notes, and snippets.

@fgnass

fgnass/LICENSE.txt

Forked from 140bytes/LICENSE.txt
Created May 30, 2011 13:33
Show Gist options
  • Save fgnass/998900 to your computer and use it in GitHub Desktop.
Save fgnass/998900 to your computer and use it in GitHub Desktop.
Download ZIP
display a loading spinner
Raw
README.md

140byt.es loading spinner

A tweet-sized, image-free, cross-browser loading spinner.

Advantages over using an animated GIF:

  • No extra HTTP request
  • Alpha transparency
  • Scaleable, so you can zoom in!

What it does

The JavaScript function creates eight <b> elements containing a bullet character (\u2022) and cycles through their CSS classes every 99 ms. Take a look at the example to see what it looks like.

Browser support

The example includes conditional comments to use solid shades of gray instead of different opacity levels for IE. Alternatively you could use the Alpha() filter, it's up to you.

If you only need to target WebKit browsers, you may also use this version which requires less CSS and has the typical Apple activity-indicator look.

There's even a third variant that uses the activity-indicator look on WebKit browsers and falls back to the circle of dots.

For real-world projects please take a look at spin.js.

Raw
annotated.js
function(a,b,c){
setInterval(
function(){
for(
b=0; // the segment index
b<8; // 8 segments (dots)
c||(a.innerHTML+='<b>•'), // create markup upon the first call
a.childNodes[b].className='b'+b+' o'+(++b-~c)%8); // assign two classes: b<#> and o<#>
c=-~c // increment by one
},99) // invoke every 99ms
}
Raw
index.js
function(a,b,c){setInterval(function(){for(b=0;b<8;c||(a.innerHTML+='<b>•'),a.childNodes[b].className='b'+b+' o'+(++b-~c)%8);c=-~c},99)}
Raw
LICENSE.txt
DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
Version 2, December 2004
Copyright (C) 2011 Felix Gnass <https://github.com/fgnass>
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": "Display a loading spinner.",
"keywords": [
"spinner",
"animation"
]
}
Raw
test.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<style type="text/css">
#spinner { position: relative; font-size: 22px }
#spinner b { position:absolute }
#spinner b.b0 { top:00px; left:20px }
#spinner b.b1 { top:03px; left:27px }
#spinner b.b2 { top:10px; left:30px }
#spinner b.b3 { top:17px; left:27px }
#spinner b.b4 { top:20px; left:20px }
#spinner b.b5 { top:17px; left:13px }
#spinner b.b6 { top:10px; left:09px }
#spinner b.b7 { top:03px; left:13px }
#spinner b.o0 { opacity: 0.8 }
#spinner b.o1 { opacity: 0.7 }
#spinner b.o2 { opacity: 0.6 }
#spinner b.o3 { opacity: 0.5 }
#spinner b.o4 { opacity: 0.4 }
#spinner b.o5 { opacity: 0.3 }
#spinner b.o6 { opacity: 0.2 }
#spinner b.o7 { opacity: 0.1 }
</style>
<!--[if lte IE 8]>
<style type="text/css">
#spinner .o0 { color: #666 }
#spinner .o1 { color: #777 }
#spinner .o2 { color: #888 }
#spinner .o3 { color: #999 }
#spinner .o4 { color: #aaa }
#spinner .o5 { color: #ccc }
#spinner .o6 { color: #ddd }
#spinner .o7 { color: #eee }
</style>
<![endif]-->
</head>
<body>
<div id="spinner"></div>
<script>
(
function(a,b,c){setInterval(function(){for(b=0;b<8;c||(a.innerHTML+='<b>•'),a.childNodes[b].className='b'+b+' o'+(++b-~c)%8);c=-~c},99)}
)(document.getElementById('spinner'));
</script>
</body>
@mathiasbynens
Copy link

As per HTML5, the demo could be shortened to:

(function(a,b,c){setInterval(function(){for(b=0;b<8;c||(a.innerHTML+='<b>•'),a.childNodes[b].className='b'+b+' o'+(++b-~c)%8);c=-~c},99)})(spinner)

@atk
Copy link

atk commented Aug 16, 2011

Would you be so kind as to rename example.html to test.html, so it would show up in our homepage? Thanks in advance.

@fgnass
Copy link
Author

fgnass commented Aug 16, 2011

@atk Sure, it shows up now.

@atk
Copy link

atk commented Aug 16, 2011

Thank you very much, @fgnass

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