Animated png - by eCSSpert.com

dabblet.css

/**
 * Animated png - by eCSSpert.com
 */
@keyframes loading-spiner { 
	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 } 
}
.loading-spiner {
	background: url(http://cl.ly/0Q23162u212j080e2r39/tab-save-spinner-active.png) no-repeat;
	height: 14px;
	width: 14px;
	animation: loading-spinner 1s linear 0s infinite normal;
	position: absolute;
	left: 50%;
	top: 50%;
}


@-webkit-keyframes loading-dots { 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 loading-dots { 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 loading-dots { 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 } }
.loading-dots {
	background: url(http://dl.dropbox.com/u/3269118/loading.png) no-repeat;
	height: 27px;
	width: 28px;
	animation: loading-dots .7s linear 0s infinite normal;
	position: absolute;
	left: 50%;
	top: 36px;
}
.x {
	width: 500px;
	height: 100px;
	background: blue;
	position: relative;
}

dabblet.html

<div class="x">
	<div class="loading-spinner"></div>
</div>

settings.json

{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}