Skip to content

Instantly share code, notes, and snippets.

@dziudek

dziudek/dabblet.css

Created May 16, 2013 11:07
Show Gist options
  • Save dziudek/5590979 to your computer and use it in GitHub Desktop.
Save dziudek/5590979 to your computer and use it in GitHub Desktop.
Download ZIP
CSS loader II
Raw
dabblet.css
/**
*
* CSS loader II
*
**/
#loader {
animation-name: loader;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-direction: reverse;
animation-timing-function: linear;
border: 3px dashed #faa;
border-radius: 50%;
box-sizing: border-box;
float: left;
height: 52px;
position: relative;
width: 52px;
}
#loader::after {
animation-name: loader;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-direction: normal;
animation-timing-function: linear;
background: transparent;
border: 3px dashed #aaf;
border-radius: 50%;
content: "";
display: block;
height: 32px;
left: 50%;
margin: -19px 0 0 -19px;
position: absolute;
top: 50%;
width: 32px;
}
@keyframes loader {
from {
transform: rotateZ(0deg);
}
50% {
transform: rotateZ(180deg);
}
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