Skip to content

Instantly share code, notes, and snippets.

@dziudek

dziudek/dabblet.css

Created May 16, 2013 11:07
Show Gist options
  • Save dziudek/5590977 to your computer and use it in GitHub Desktop.
Save dziudek/5590977 to your computer and use it in GitHub Desktop.
Download ZIP
CSS loader I
Raw
dabblet.css
/**
*
* CSS loader I
*
**/
#loader {
animation-name: loader;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-direction: reverse;
animation-timing-function: linear;
border: 5px solid #faa;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-radius: 50%;
box-sizing: border-box;
float: left;
height: 52px;
width: 52px;
}
#loader:after {
animation-name: loader;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-timing-function:linear;
border: 5px solid #aaf;
border-bottom: 5px solid transparent;
border-top: 5px solid transparent;
box-sizing: border-box;
border-radius: 50%;
content: "";
display: block;
height: 42px;
margin: 0;
width: 42px;
}
@keyframes loader {
from {
transform: rotateZ(0deg);
}
to {
transform: rotateZ(360deg);
}
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<div id="loader"></div>
Raw
dabblet.js
// alert('Hello world!');
Raw
settings.json
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment