5/2/2020 Crear un preloader (animación de carga) con CSS3

Adquire la Suscripción Anual por $99 dólares

DevCode Cursos
Ingresar

Comunidad  Planes Regístrate Gratis

Crear un preloader (animación

de carga) con CSS3
Por Juan José Pino Reyes

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
https://devcode.la/tutoriales/crear-un-preloader-con-css3/ 1/7
5/2/2020 Crear un preloader (animación de carga) con CSS3

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.

EDIT ON
HTML CSS Result

.preloader {
width: 70px;
height: 70px;
border: 10px solid #eee;
Resources 1× 0.5× 0.25× Rerun

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.

EDIT ON
HTML CSS Result

.preloader {
width: 70px;
height: 70px;
border: 10px solid #eee;
border-radius: 50%;
Resources

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 in nitamente 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.

EDIT ON
HTML CSS Result

.preloader {
width: 70px;
height: 70px;
border: 10px solid #eee;
border-top: 10px solid #666;
border-radius: 50%;
}
Resources

https://devcode.la/tutoriales/crear-un-preloader-con-css3/ 2/7
5/2/2020 Crear un preloader (animación de carga) con CSS3

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 nal, 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 nal (360°).

EDIT ON
HTML CSS Result

.preloader {
width: 70px;
height: 70px;
border: 10px solid #eee;
border-top: 10px solid #666;
border-radius: 50%;
animation-name: girar;
animation-duration: 2s;
}
@keyframes girar {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
Resources 1× 0.5× 0.25× Rerun

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

https://devcode.la/tutoriales/crear-un-preloader-con-css3/ 3/7
5/2/2020 Crear un preloader (animación de carga) con CSS3

EDIT ON
HTML CSS Result

.preloader {
width: 70px;
height: 70px;
border: 10px solid #eee;
border-top: 10px solid #666;
border-radius: 50%;
animation-name: girar;
animation-duration: 2s;
animation-iteration-count:
infinite;
}
@keyframes girar {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
Resources 1× 0.5× 0.25× Rerun

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 n.

EDIT ON
HTML CSS Result

.preloader {
width: 70px;
height: 70px;
border: 10px solid #eee;
border-top: 10px solid #666;
border-radius: 50%;
animation-name: girar;
animation-duration: 2s;
animation-iteration-count:
infinite;
animation-timing-function:
linear;
}
@keyframes girar {
from {
transform: rotate(0deg);
}
to {
Resources 1× 0.5× 0.25× Rerun

https://devcode.la/tutoriales/crear-un-preloader-con-css3/ 4/7
5/2/2020 Crear un preloader (animación de carga) con CSS3

¿Te gustó el tutorial?

Ayúdanos a llegar a más personas

Twittear

Juan José Pino Reyes

CMO y Co-fundador de Devcode.la, Google Adwords Certi ed, Google Analytics Certi ed,
Hootsuite Certi ed, con experiencia y apasionado por el Marketing digital, HTML5, CSS3,
JavaScript y PHP.

 @jjosepino

https://devcode.la/tutoriales/crear-un-preloader-con-css3/ 5/7
5/2/2020 Crear un preloader (animación de carga) con CSS3

3 Comentarios DevCode 
1 Iniciar sesión

 Recomendar 7 t Tweet f Compartir ordenar por el mejor

Únete a la discusión...

INICIAR SESIÓN CON

O REGISTRARSE CON DISQUS ?

Nombre

Takeshi Jeff • hace 7 meses

y como lo implemento ya en la carga de mi pagina web, porque me
aparece en la parte superior del documento .-.
△ ▽ • Responder • Compartir ›

Daniel Tejeda > Takeshi Jeff • hace 4 meses

agrega esto a la clase preloader

position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
△ ▽ • Responder • Compartir ›

nanisan • hace 2 años • edited

Excelente. justo lo que necesitaba
△ ▽ • Responder • Compartir ›

✉ Suscribirse d Agrega Disqus a tu sitioAgregar DisqusAgregar

SIGUENOS EN YOUTUBE

SIGUENOS EN FACEBOOK

SIGUENOS EN TWITTER
Seguir a @devcodela 14,9 mil seguidores

https://devcode.la/tutoriales/crear-un-preloader-con-css3/ 6/7
5/2/2020 Crear un preloader (animación de carga) con CSS3

ÚLTIMOS TUTORIALES
Cómo enlazar
phpMyAdmin con MYSQL
Workbench
25/09/2019

Búsqueda Binaria en C++

27/09/2019

Caché de lado del servidor

con Express en NodeJS
27/11/2017

CURSOS
RELACIONADOS
Curso de HTML y CSS
Gratis
GRATUITO

Curso de CSS3
PREMIUM

https://devcode.la/tutoriales/crear-un-preloader-con-css3/ 7/7