En este tutorial aprenderemos a crear una simple animación de carga con animaciones CSS3.

Primero crearemos nuestro círculo que posteriormente animaremos con CSS3.

Para esto en nuestro documento HTML crearemos un elemento "div" con valor de clase "preloader" y en nuestra hoja de estilos CSS le daremos a la clase de este elemento un alto y ancho de 70px respectivamente, para visualizar inicialmente el elemento "div" en el navegador le daremos un ancho de borde de 10 px y un color de borde gris claro.

Ahora que visualizamos los bordes de nuestro elemento "div", le daremos forma circular utilizando la propiedad CSS border-radius, al ponerle el valor de 50% obtendremos una circunferencia.

Para entender lo que ha pasado, teníamos un cuadrado, al agregar el valor de 50% a la propiedad border-radius de este elemento cada esquina se curvó, el radio de cada curva es la mitad de un lado por lo cual nos quedó un elemento con apariencia circular.

Nuestro preloader tendrá la apariencia de un cuarto de círculo dando vueltas infinitamente dentro del círculo completo, para esto le daremos un punto de partida por lo cual al lado superior del elemento le daremos un color distinto, el color será un gris oscuro.

Ahora crearemos una animación que de la impresión de carga, para explicar mejor este proceso no utilizaremos la propiedad shorthand "animation" sino las propiedades "animation-name", "animation-duration" y "animation-iteration-count".

Primero asignaremos un nombre a la animación con la propiedad "animation-name", el valor será "girar", así mismo utilizaremos la regla @keyframe para hacer rotar nuestro elemento, utilizando la propiedad "transform" y su función "rotate" e indicándole un estado inicial y un estado final, también agregaremos un valor de 2 segundos a la propiedad "animation-duration" para que durante ese tiempo el elemento rote desde el estado inicial (0°) hasta el estado final (360°).

Actualmente nuestro elemento solo hace una rotación, para generar rotaciones infinitas, utilizaremos la propiedad "animation-iteration-count" con el valor "infinite".

Hasta aquí tenemos casi todo listo, pero vemos que la velocidad no es pareja durante todo el giro, para esto utilizaremos la propiedad "animation-timing-function" con valor "linear" para que el la rotación tenga la misma velocidad de inicio a fin.