Desafio: Crea loaders animados con @Keyframe

Hace poco he estado pensando en: ¿Qué podría ser tan impresionante en una página web como la capacidad de interactuar con ella?

Investigando en varias páginas sobre diseño de experiencia de usuario (UX design), encontré una gran cantidad de contenido interesante. Sin embargo, lo que más llamó mi atención fueron proyectos simples realizados solo con CSS, que no requieren de código complejo ni más de 100 líneas de código.

En este caso, me gustaría desafiarlos a crear una pantalla de carga similar a esta:

Es mucho más fácil de lo que parece. Inténtalo y luego mira la solución. click.