Loaders CSS Animados

Los preloaders son pequeñas animaciones que se muestran en el navegador mientras una página termina de cargarse. Una vez etá cargada el preloader se oculta o elimina y se muestra la página

Suelen usarse para páginas pesadas o con elementos que tarden en cargarse. No solo es algo estético, sino que evita que el usuario piense que el sitio ha dejado de responder

En los ejemplos los preloader se implementan con un bloque con class = "loader". En algunos casos este bloque puede contener otos div

Las animaciones se suelen basar en @keyframes cuyos nombres comienzan por movie, si hay varios a este nombre se le agrega un número: movie_1 movie_2...

En esta página puedes como mostrar u ocultar el loader con javascript. Un simple evento de window load que asigne el style="display: none" al bloque loader,