Loading animation like the one seen on http://www.freeger.com/projects/contextad/ with CSS

dabblet.css

/**
 * Loading animation like the one seen on http://www.freeger.com/projects/contextad/ with CSS
 * Caveat: Not DRY. The content needs to be repeated in a data- attribute (or directly in the CSS).
 */

body {
	background: #ccc51c;
	min-height: 100%;
}

h1 {
	position: absolute;
	left: 50%;
	margin-left: -1.9em;
	font: 900 800% Baskerville, 'Palatino Linotype', Palatino, serif;	
	max-width: 4em;
	color: hsla(0,0%,100%,.3);
	animation: loading 10s linear;
}

@keyframes loading {
	from { max-width: 0; }
}

h1:before {
	content: attr(data-content);
	position: absolute;
	overflow: hidden;
	max-width: inherit;
	color: white;
	animation: loading 10s linear;
}

dabblet.html

<h1 data-content="Contad">Contad</h1>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}