Navegando por la red encontré un experimento en codepen.io. Me ayudó a comprender las posibilidades que tiene la avandonada propiedad de css, background-clip:text. Con este post pretendo exponer este experimento de una forma más clara (que no quiere decir que para todo el mundo sea más clara).

Resultado que queremos conseguir:
Loading
¿Cómo?

Primero definimos los divs:

<div class="loading-cont">
	<div class="loading">Loading</div>
</div>

Y después el css. Primero la los contenedores

.loading-cont{
	background-color:#444;
	padding:2em 0;
}
.loading{
	/*--Propiedades-triviales--*/
	font-family:Helvetica;
	font-size:5em;
	font-weight:bold;
	text-transform:uppercase;
	text-align:center;
	line-height: 1em;
 
	/*--Propiedades-de-la-texto--*/
	color:transparent;
	text-shadow:0 0 0 rgba(0,0,0,.1);
 
	/*--Propiedades-del-fondo--*/
	background-image:url(http://mononelo.es/design/wp-content/uploads/2013/11/wave.png);
	background-repeat:repeat-x; /*--Importante--*/
	background-size: 200px 100px; /*--Importante--*/
 
	/*--Background-clip-text--*/
	background-clip:text;
	-webkit-background-clip:text;
 
	/*--Animación--*/
	animation:wave-animation 5s infinite linear alternate;
	-webkit-animation:wave-animation 5s infinite linear alternate;
}

En cuanto a la imagen, se trata de un png con las forma de la ola que se repite en el eje de las X:

Y la animación:

@keyframes wave-animation{
	0%{background-position:0 -100%;}
	10%{background-position:0 -100%;} /*--Se-esperamedio-segundo--*/
	90%{background-position:300% 100%;}
	100%{background-position:300% 100%;}/*--Se-esperamedio-segundo--*/
}
@-webkit-keyframes wave-animation{
	0%{background-position:0 -100%;}
	10%{background-position:0 -100%;}/*--Se-esperamedio-segundo--*/
	90%{background-position:300% 100%;}
	100%{background-position:300% 100%;}/*--Se-esperamedio-segundo--*/
}
Aunque «background-clip» sea compatible con muchos navegadores, el «background-clip:text;» sólo funciona en navegadores con motores de render webkit, cómo Chrome o Safari.