Skip to content

Instantly share code, notes, and snippets.

@dziudek

dziudek/dabblet.css

Created May 16, 2013 11:19
Show Gist options
  • Save dziudek/5591032 to your computer and use it in GitHub Desktop.
Save dziudek/5591032 to your computer and use it in GitHub Desktop.
Download ZIP
CSS loader IV
Raw
dabblet.css
/**
*
* CSS loader IV
*
**/
#loader {
background: #ee6;
background-clip:content-box;
box-sizing: border-box;
float: left;
height: 32px;
position: relative;
overflow: hidden;
width: 32px;
}
#loader:after {
animation-name: loader1;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-timing-function: linear;
background: #6ee;
content: "";
display: block;
left: 100%;
position: absolute;
height: 32px;
width: 32px;
z-index: 1;
}
#loader:before {
animation-name: loader2;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-timing-function: linear;
background: #e6e;
content: "";
display: block;
top: 100%;
position: absolute;
height: 32px;
width: 32px;
z-index: 2;
}
@keyframes loader1 {
from { left: 100%; }
20% { left: 0%; }
60% { left: 0%; }
80% { left: 100%; }
}
@keyframes loader2 {
from { top: 100%; }
40% { top: 100%; }
60% { top: 0%; }
80% { top: 0%; }
to { top: 100%; }
}
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