Hourglass loading animations

dabblet.css

/**
 * Hourglass loading animations
 */
 
body
{
	background-color : #b4da55; /* \m/ */
	font-family      : sans;
}

section
{
	width      : 10em;
	text-align : center;
}

.wait
{
	animation-iteration-count : infinite;
	
	margin  : 0;
	padding : 0;
	/* yay, http://dataurl.net/#dataurlmaker */
	background-image : url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAA4CAYAAAHiE2ruAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9wFGBUkCBG7jvsAAAMjSURBVFjDzVhNa1NBFD0vCYoiKAmRSkHJyp2kVJCWSkHwH7iKIFlVCunebvwNipCf0E2h0K2QXUGQloK74kIUisHSYEAiSsJ1M6+M452ZO/MmDw88eAwzZ867H3PvvIyICAYqADJjLKuAQT6Yz34GAJlGSQB+AriaD5KXMzMlVQA0zBk618zkqVVsQi90VQCs/D1EBCLqkR3/fBqrX99riZtgGslkzDjVA2NLMq0h0vQCDmRcMEiCA6Jg8fnExFP965oAvkmMaX7ADECNsziZLC5Nl23C29r7Ly5IbW7JdKZNpyFUZNrwSo9MKuyWjIgO1fsCgEWE40jXDSJ6QnGAmXW+b+TwDsAq592DQKJVzrmhqu5f2CePTCYyPgO47SC5AWAsSaY7lnR9rsbHtmjjni7joaltvo3EhzcSIin29XVF46gBYCQ5uXz4yHmtG0FU1+OICqoicQ2QoKaF+XLE+lMAQzMgY9DL1xf12llIxQ2Oo/cRRCMujl4X+cYiKXIA4KGNaAqgKiS6qRvb9NqDGI9xREeqOfBhyWcjALgO4LuD5Is6ir0N0Djvoh3nOULO7A1bVeWezJH8l8wOx9UIunJtwox1fc2P+UwcGd/m1nCK+gCuOJQeSxVJMPDVtf3QvshGFIJNm/vrAM4Dcm2mdzO6sV8GHkFVW66d6wVPep5xiuoRB+OK9Nbiw91URAtB1zbp4Z+EKBXyu6b+bJe4/7a5P+ezYYmChpJz9qREQSeS4hibvDHtUENaiXZKsM6OpMXKYfvDkQoz1VmNpBY6A7A1R0FbnBhfOwMi2qX02HXt6RMEInqbUMzAt59EEIion0BMX7KXVBCIaNnTvtkwUWuRWpDeKk+FYjZC+bPI2sq13dzfyd8xxTUG3URzgtPefDoRMdSZh8uuAfgAoBVp0U8A7gH4kcJlbXUTbRU4mVuKo11U0Lq6RFUTlIuq4loP+X9hFtivicSYhfWW+bdBYqG9OYjJLbUX6rIOgLU5Vvs1tYdYUK+EBq0njaHQ23ARNMy+iLPQoxKb/McSlzVLFNTkXHbI3I8XSxJ0at7N/rur9B+jSnYcPtxVcgAAAABJRU5ErkJggg==);
	width  : 36px;
	height : 56px;
	margin : 0 auto;
	/* hide text */
	white-space : pre;
	overflow    : hidden;
	text-indent : 36px;
}

/* A */

@keyframes wait-a
{
	from {
		height : 56px;
		margin : 0 auto 0;
		background-position : 0 0px;

	}
	40% {
		height : 0px;
		margin : 56px auto 0;
		-background-position : 0 -56px;
	}
	60% {
		height : 0px;
		margin : 0 auto 56px;
		background-position : 0 0;
	}

	to {
		height : 56px;
		margin : 0 auto 0;
		background-position : 0 0px;
	}
}

#a .wait
{
	animation-name     : wait-a;
	animation-duration : 10s;
}


/* B */

@keyframes wait-b
{
	from
	{
		transform : rotate(0deg);
	}
	
	30%,
	50%
	{
		transform : rotate(180deg);	
	}

	80%,
	to
	{
		transform : rotate(360deg);
	}
}

#b .wait
{
	animation-name     : wait-b;
	animation-duration : 10s;
}

/* C, sadly, clip does not animate */

@keyframes wait-c
{
	from
	{
		clip : rect(0px, 0px, 56px, 32px);
	}

	to
	{
		clip : rect(56px, 0px, 56px, 32px);
	}
}

#c
{
	padding-top : 56px;
	position : relative;
}
#c .wait
{
        position : absolute;
        top : 0;
        left : 5em; /* parent's width / 2 */
        margin-left : -13px; /* image width / 2 */
        
	animation-name     : wait-c;
	animation-duration : 10s;
}

dabblet.html

<section id="a">

    <p class="wait">Please, wait.</p>
    <p>Loading stuff…</p>

</section>

<section id="b">

    <p class="wait">Please, wait.</p>
    <p>Loading stuff…</p>

</section>





<section id="c">

    <p class="wait">Please, wait.</p>
    <p>Loading stuff…</p>

</section>

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}