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: static;
	left: 50%;
		color: hsla(0,0%,100%,.3);
	font: 900 800% Baskerville, 'Palatino Linotype', Palatino, serif;	
}

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

h1:before {
	content: 'Lies';
	position: absolute;
	overflow: hidden;
	max-width: 4em;
	color: red;
	animation: loading 1s linear;
	z-index:-1;
}

dabblet.html

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

dabblet.js

// alert('Hello world!');

settings.json

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