Skip to content

Instantly share code, notes, and snippets.

@mlabod

mlabod/dabblet.css

Created March 3, 2013 20:14
Show Gist options
  • Save mlabod/5078079 to your computer and use it in GitHub Desktop.
Save mlabod/5078079 to your computer and use it in GitHub Desktop.
Download ZIP
Pure CSS Loading Indicator
Raw
dabblet.css
/**
* Pure CSS Loading Indicator
*/
@keyframes spin {
to {
transform:rotate(360deg);
}
}
html {
background: #549CD5;
padding:100px;
-webkit-font-smoothing:antialiased
}
div.loading {
position:relative;
animation:spin 1.5s infinite linear;
}
div.loading {
display:inline-block;
vertical-align:middle;
height:10px;
width:10px;
border-radius:15px;
}
div.loading {
box-shadow:
0px 20px 0px rgba(255,255,255,0.2),
0px -20px 0px rgba(255,255,255,0.2),
20px 0px 0px rgba(255,255,255,0.2),
-20px 0px 0px rgba(255,255,255,0.2),
-15px -15px 0px rgba(255,255,255,0.2),
15px -15px 0px rgba(255,255,255,0.2),
-15px 15px 0px rgba(255,255,255,0.2),
15px 15px 0px rgba(255,255,255,0.2);
}
span {
color:white;
font-family:Helvetica Neue, Helvetica, Arial, Sans-Serif;
margin-left:30px;
font-size:20px;
font-weight:bold;
text-shadow:0 1px 0 rgba(0,0,0,0.5)
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<div class="loading"></div> <span>LOADING...</span>
Raw
dabblet.js
// alert('Hello world!');
Raw
settings.json
{"view":"split-vertical","fontsize":"80","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment