Skip to content

Instantly share code, notes, and snippets.

@Victa

Victa/index.html

Created November 20, 2012 13:55
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Victa/4118079 to your computer and use it in GitHub Desktop.
Save Victa/4118079 to your computer and use it in GitHub Desktop.
Download ZIP
140byt.es loading spinner
Raw
index.html
<body>
<div id="spinner"></div>
</body>​
Raw
script.js
(function(a,b,c){setInterval(function(){for(b=0;b<8;c||(a.innerHTML+='<b><i>•'),a.childNodes[b].className='b'+b+' o'+(++b-~c)%8);c=-~c},99)}
)(document.getElementById('spinner'));
​
Raw
style.css
#spinner { position: relative; font-size: 22px; }
#spinner b {
position:absolute;
display: block;
-webkit-transform-origin: 50% 0;
top: 20px;
left: 20px;
}
#spinner b>i {
display: block;
background:#000;
width:4px;
height: 9px;
border-radius:4px;
text-indent: -999em;
margin: 16px 0 0 0;
}
#spinner .b0 { top:00px; left:20px; }
#spinner .b1 { top:03px; left:27px; -webkit-transform:rotate(45deg); }
#spinner .b2 { top:10px; left:30px; -webkit-transform:rotate(90deg); }
#spinner .b3 { top:17px; left:27px; -webkit-transform:rotate(135deg); }
#spinner .b4 { top:20px; left:20px; -webkit-transform:rotate(180deg); }
#spinner .b5 { top:17px; left:13px; -webkit-transform:rotate(225deg); }
#spinner .b6 { top:10px; left:09px; -webkit-transform:rotate(270deg); }
#spinner .b7 { top:03px; left:13px; -webkit-transform:rotate(315deg); }
#spinner .o0 { opacity: 0.8; _color: #666; }
#spinner .o1 { opacity: 0.7; _color: #777; }
#spinner .o2 { opacity: 0.6; _color: #888; }
#spinner .o3 { opacity: 0.5; _color: #999; }
#spinner .o4 { opacity: 0.4; _color: #aaa; }
#spinner .o5 { opacity: 0.3; _color: #ccc; }
#spinner .o6 { opacity: 0.2; _color: #ddd; }
#spinner .o7 { opacity: 0.1; _color: #eee; }
​
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment