Hacer mínimo dos loaders/spinners (a elección). Pueden intentan hacer las animaciones más complejas también. En ambos casos, les recomiendo mucho que primero piensen e intenten lograrlo cómo sea, no importa si no queda 100%. Si se traban mucho, no está mal ver y analizar el código del ejemplo e intentar entender cómo está hecho (hay mucho truco dando vuelta), pero no copien y peguen, una vez que más o menos comprendieron por dónde viene la mano, sigan intentando hacerlo por su cuenta.
Copo de nieve: ❅ (TIP: usar dos animaciones, una para movimiento vertical y otra para horizontal)
Hacer un mixin de Sass que pida tres parámetros: cantidad de elementos, diferencia de delay, y delay inicial. Este último debe ser opcional. Por ejemplo:
.box {
@include sequentialDelay(4, 0.5, 1);
}Debe generar:
.box:nth-child(1) { animation-delay: 1s; }
.box:nth-child(2) { animation-delay: 1.5s; }
.box:nth-child(3) { animation-delay: 2s; }
.box:nth-child(4) { animation-delay: 2.5s; }Es decir, para el selector en que es usado debe generar selectores con nth-child secuenciales, con la propiedad animation-delay incrementándose según la diferencia de delay, y comenzando con un delay inicial para el primer elemento.
Usar bucles (for loops) e interpolación