Skip to content

Instantly share code, notes, and snippets.

@james2doyle

james2doyle/dabblet.css

Created November 7, 2012 14:03
Show Gist options
  • Save james2doyle/4031781 to your computer and use it in GitHub Desktop.
Save james2doyle/4031781 to your computer and use it in GitHub Desktop.
Download ZIP
Letterpress CSS Loader
Raw
dabblet.css
/**
* Letterpress CSS Loader
*/
body {
background: #f8f8f8;
}
div {
width: 36px;
height: 36px;
position: absolute;
top: 40%;
left: 50%;
margin-left: -18px;
animation: go 2s cubic-bezier(0.680, -0.550, 0.265, 1.550) forwards infinite;
}
div ul {
margin: 0;
padding: 0;
}
div ul li {
background: #555;
width: 10px;
height: 10px;
margin: 1px;
list-style: none;
float: left;
border-radius: 5px;
}
div ul li:nth-child(2) {
background: none;
}
@keyframes go {
0% {
transform: rotate(0deg);
}
25% {
transform: rotate(90deg);
}
50% {
transform: rotate(180deg);
}
75% {
transform: rotate(270deg);
}
100% {
transform: rotate(360deg);
}
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<div>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
Raw
settings.json
{"view":"split-vertical","fontsize":"70","seethrough":"","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment