Untitled

dabblet.css

body {
	background:#222;
	color:white;
}
body > div {
	margin:30px;
}
#loading1 {
	color:black;
	position:relative;
	text-align:center;
	background:#555555;
	width:500px;
	padding:10px;
	border-radius:20px;
	box-shadow:0 -1px 0px #aaa inset;
	z-index:12;
}
#loading1:after {
	content:"";
	position:absolute;
	left:10px;
	width:498px;
	height:20px;
	background-color:#77d;
	background-image:repeating-linear-gradient(-45deg, transparent, transparent 15px, rgba(255,255,255,.5) 15px, rgba(255,255,255,.5) 36px);
	background-size:50px 50px;
	border-radius:10px;
	box-shadow:0 2px 4px white inset,0 -2px 4px black inset;
	z-index:-1;
}
#loading1:after {
	animation:scroll 2s linear infinite;
}
@keyframes scroll {
	from {
	background-position:0 0;
	}
	to {
	background-position:50px 0;
	}
}
#loading2 {
	position:relative;
	width:100px;
	animation:animateText 2s cubic-bezier(.35,1.44,.74,-0.42) alternate infinite;
}
@keyframes animateText {
	from {
	left:0;
	}
	to {
	left:90px;
	}
}
#loading3 {
	text-align:center;
	position:relative;
	border-bottom:8px dotted grey;
	width:150px;
}
#loading3:before {
	content:"";
	position:absolute;
	height:20px;
	width:160px;
	border-bottom:8px solid #222;
	z-index:1;
	animation:movingDots 6s cubic-bezier(1,0,1,0) infinite alternate;
}
@keyframes movingDots {
	from {
	left:0px;
	}
	10% {
	left:16px;
	}
	20% {
	left:32px;
	}
	30% {
	left:48px;
	}
	40% {
	left:64px;
	}
	50% {
	left:80px;
	}
	60% {
	left:96px;
	}
	70% {
	left:112px;
	}
	80% {
	left:128px;
	}
	90% {
	left:144px;
	}
	to {
	left:200px;
	}
}

dabblet.html

<div>Warning: Works only in Firefox (due to the animation of pseudo elements)</div>
<!--Looks nice, works nice. No extra HTML. However, it animates a pseudo element, so it doesn't work in anything but Firefox yet... 
If I had used an empty Span tag it would be more compatable, but considerably less cool. Inspired by this: http://dribbble.com/shots/119684-Progress-Bars -->
<div id="loading1">Loading...</div>
<!--Simple, for when simple is needed.-->
<div id="loading2">Loading...</div>
<!--nice little trick with borders. Could be more elaborate, but I decided not to take it too far. Modify for your needs.-->
<div id="loading3">Loading...</div>

<div id="loading4">Loading...</div>

settings.json

{"view":"split-vertical","prefixfree":"1","page":"html"}