Skip to content

Instantly share code, notes, and snippets.

@zincplusplus

zincplusplus/dabblet.css

Created June 18, 2012 11:55
Show Gist options
  • Save zincplusplus/2948027 to your computer and use it in GitHub Desktop.
Save zincplusplus/2948027 to your computer and use it in GitHub Desktop.
Download ZIP
Animated png - by eCSSpert.com
Raw
dabblet.css
/**
* Animated png
*/
@-webkit-keyframes ball { 0%, 19.99%, 100% { background-position: 0 0 } 20%, 39.99% { background-position: -30px 0 } 40%, 59.99% { background-position: -60px 0 } 60%,79.99% { background-position: -90px 0 } 80%, 99.99% { background-position: -120px 0 } }
@-firefox-keyframes ball { 0%, 19.99%, 100% { background-position: 0 0 } 20%, 39.99% { background-position: -30px 0 } 40%, 59.99% { background-position: -60px 0 } 60%,79.99% { background-position: -90px 0 } 80%, 99.99% { background-position: -120px 0 } }
@-ms-keyframes ball { 0%, 19.99%, 100% { background-position: 0 0 } 20%, 39.99% { background-position: -30px 0 } 40%, 59.99% { background-position: -60px 0 } 60%,79.99% { background-position: -90px 0 } 80%, 99.99% { background-position: -120px 0 } }
div.loading {
background: url(http://dl.dropbox.com/u/3269118/loading.png) no-repeat;
height: 27px;
width: 28px;
animation: ball .7s linear 0s infinite normal;
position: absolute;
left: 50%;
top: 36px;
}
.x {
width: 500px;
height: 100px;
background: blue;
position: relative;
}
Raw
dabblet.html
<div class="x">
<div class="loading"></div>
</div>
Raw
settings.json
{"view":"separate","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment