Este artículo compartirá contigo 8 consejos de CSS para implementar efectos de carga. ¡Espero que te resulte útil!
cargador-1
Esta debería ser la carga de CSS más simple. Hay un arco rojo en el círculo. Si miras de cerca, encontrarás que este arco es exactamente 1/4.
Lógica de implementación:
Un contenedor con igual ancho y alto, establezca el borde en blanco. Luego establezca el color rojo en la parte inferior,
Cuando el radio del borde se establece en 50%, puede convertirse simplemente en un círculo.
Agrega una animación de rotación al círculo. La animación del ángulo de rotación en CSS es rotar (), solo necesitamos configurarla para que gire de 0 a 360. (Esta animación se utilizará muchas veces a continuación y no se describirá en detalle a continuación. Se comparte)
@-webkit-keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}código completo
.loader-1 {
width: 48px;
height: 48px;
border: 5px solid #FFF;
border-bottom-color: #FF3D00;
border-radius: 50%;
display: inline-block;
-webkit-animation: rotation 1s linear infinite;
animation: rotation 1s linear infinite;
}cargador-2
Observación: Hay un círculo en el exterior y un elemento rojo girando en el interior.
Implementar lógica
Un contenedor de igual ancho y alto, con lados blancos y esquinas redondeadas al 50%. Este es el círculo exterior.
¿Cómo se consigue el color rojo del interior? Hay dos ideas aquí. 1; Agrega un pequeño div, colócalo dentro y establece un borde inferior rojo como loader-1. 2: Utilice ::after, la idea es la misma que la del método 1.
Añade animación de rotación.
código completo
.loader-2 {
width: 48px;
height: 48px;
border: 3px solid #FFF;
border-radius: 50%;
display: inline-block;
position: relative;
-webkit-animation: rotation 1s linear infinite;
animation: rotation 1s linear infinite;
}
.loader-2:after {
content: "";
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 40px;
height: 40px;
border-radius: 50%;
border: 3px solid transparent;
border-bottom-color: #FF3D00;
}cargador-3
Observación: El interior es un círculo y el exterior es un arco rojo.
Implementar lógica
Este efecto de carga es el mismo que el del cargador-2, la diferencia es que el arco rojo está por dentro y por fuera.
código completo
.loader-3 {
width: 48px;
height: 48px;
border: 3px solid #FFF;
border-radius: 50%;
display: inline-block;
position: relative;
-webkit-animation: rotation 1s linear infinite;
animation: rotation 1s linear infinite;
}
.loader-3:after {
content: "";
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 56px;
height: 56px;
border-radius: 50%;
border: 3px solid transparent;
border-bottom-color: #FF3D00;
}cargador-4
Observación: Hay un círculo en el exterior y dos círculos en el interior, estos dos círculos son exactamente simétricos.
Implementar lógica
Un contenedor de igual ancho y alto, con lados blancos y esquinas redondeadas al 50%. Este es el círculo exterior.
¿Cómo se consigue el rojo interior? Hay dos ideas aquí. 1; Agregue dos divs pequeños, establezca el color de fondo en rojo y luego establezca las esquinas al 50%, para que parezcan dos puntos pequeños. 2: Utilice ::after y ::before, la idea es la misma que la del método 1.
Añade animación de rotación.
código completo
.loader-4 {
width: 48px;
height: 48px;
border: 2px solid #FFF;
border-radius: 50%;
display: inline-block;
position: relative;
-webkit-animation: rotation 1s linear infinite;
animation: rotation 1s linear infinite;
}
.loader-4:before {
left: auto;
top: auto;
right: 0;
bottom: 0;
content: "";
position: absolute;
background: #FF3D00;
width: 6px;
height: 6px;
transform: translate(-150%, -150%);
border-radius: 50%;
}
.loader-4:after {
content: "";
position: absolute;
left: 0;
top: 0;
background: #FF3D00;
width: 6px;
height: 6px;
transform: translate(150%, 150%);
border-radius: 50%;
}cargador-5
Observación: Hay tres capas en total, el círculo blanco más externo, el círculo rojo del medio y el círculo blanco interior. Cada círculo tiene un espacio de medio arco y el círculo exterior y el círculo interior giran en la misma dirección.
Implementar lógica
Un contenedor de igual ancho y alto, con lados blancos y esquinas redondeadas al 50%. Este es el círculo exterior.
El problema aquí es cómo realizar el espacio en el círculo. En realidad, es muy simple. Hay un valor de propiedad en CSS: transparent . Utilice este valor para establecer la transparencia del borde para realizar el espacio.
Para los arcos internos rojo y blanco, continúe usando ::after y ::before.
Además de la animación, aquí hay una animación de rotación en la dirección opuesta ( rotaciónAtrás ). La rotación aquí se establece en un ángulo negativo y la rotación se puede girar en la dirección opuesta.
@keyframes rotationBack {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(-360deg);
}
}código completo
.loader-5 {
width: 48px;
height: 48px;
border-radius: 50%;
display: inline-block;
position: relative;
border: 3px solid;
border-color: #FFF #FFF transparent transparent;
-webkit-animation: rotation 1s linear infinite;
animation: rotation 1s linear infinite;
}
.loader-5:before {
width: 32px;
height: 32px;
border-color: #FFF #FFF transparent transparent;
-webkit-animation: rotation 1.5s linear infinite;
animation: rotation 1.5s linear infinite;
}
.loader-5:after, .loader-5:before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
border: 3px solid;
border-color: transparent transparent #FF3D00 #FF3D00;
width: 40px;
height: 40px;
border-radius: 50%;
-webkit-animation: rotationBack 0.5s linear infinite;
animation: rotationBack 0.5s linear infinite;
transform-origin: center center; *
}cargador-6
Observación: Parece un reloj con una manecilla dentro de un círculo.
Implementar lógica
Un contenedor de igual ancho y alto, con lados blancos y esquinas redondeadas al 50%. Este es el círculo exterior.
Cómo se implementa el puntero: de ahora en adelante, ya no discutiremos la situación de agregar nuevos divs . De hecho, el puntero rojo es un contenedor simple con ancho y alto inconsistentes.
código completo
.loader-6 {
width: 48px;
height: 48px;
border: 2px solid #FFF;
border-radius: 50%;
display: inline-block;
position: relative;
-webkit-animation: rotation 1s linear infinite;
animation: rotation 1s linear infinite;
}
.loader-6:after {
content: "";
position: absolute;
left: 50%;
top: 0;
background: #FF3D00;
width: 3px;
height: 24px;
transform: translateX(-50%);
}cargador-7
Observación: Primero determine varios círculos, dos en total. Cuando el primer círculo no ha desaparecido, ha aparecido el segundo círculo. Finalmente, apareció un efecto similar a las ondas de agua. También tenga en cuenta que los dos círculos tienen el mismo tamaño porque eventualmente desaparecen en el mismo lugar.
Implementar lógica
Primero determine si los dos círculos están en el contenedor. Lo anterior siempre agrega un borde al contenedor. Por supuesto, este ejemplo también se puede usar, pero para simplificar la implementación, colocamos estos dos círculos en ::after y ::before.
Con la animación, el círculo aquí se amplía gradualmente. En CSS, la escala se utiliza para ampliar y reducir elementos. Al mismo tiempo, para lograr el efecto de eliminar gradualmente las ondas, agregamos transparencia.
@keyframes animloader7 {
0% {
transform: scale(0);
opacity: 1;
}
100% {
transform: scale(1);
opacity: 0;
}
}código completo
Aquí, debido a que los dos círculos aparecen uno tras otro, se necesita un círculo más un retraso.
.loader-7 {
width: 48px;
height: 48px;
display: inline-block;
position: relative;
}
.loader-7::after, .loader--7::before {
content: "";
width: 48px;
height: 48px;
border-radius: 50%;
border: 2px solid #FFF;
position: absolute;
left: 0;
top: 0;
-webkit-animation: animloader7 2s linear infinite;
animation: animloader7 2s linear infinite;
}
.loader-7::after {
-webkit-animation-delay: 1s;
animation-delay: 1s;
}
.loader-7::after, .loader-7::before {
content: "";
width: 48px;
height: 48px;
border-radius: 50%;
border: 2px solid #FFF;
position: absolute;
left: 0;
top: 0;
-webkit-animation: animloader7 2s linear infinite;
animation: animloader7 2s linear infinite;
}cargador-8
Observación: Un arco más un triángulo.
Implementar lógica
Un contenedor de igual ancho y alto, con lados blancos y esquinas redondeadas al 50%. Este es el círculo exterior.
transparente , utilice este valor para establecer la transparencia del borde para lograr un espacio.
Crea flechas en: después. Hay muchas formas de implementar triángulos en CSS, la más simple de las cuales es usar bordes. No es necesario establecer el ancho y el alto del elemento. Solo necesita establecer el tamaño del borde y establecer el color en solo uno. lado.
border: 10px solid transparent;
border-right-color: #FFFAñade animación de rotación.
código completo
.loader-8 {
width: 48px;
height: 48px;
border: 3px solid #FFF;
border-bottom-color: transparent;
border-radius: 50%;
display: inline-block;
position: relative;
-webkit-animation: rotation 1s linear infinite;
animation: rotation 1s linear infinite;
}
.loader-8:after {
content: "";
position: absolute;
left: 20px;
top: 31px;
border: 10px solid transparent;
border-right-color: #FFF;
transform: rotate(-40deg);
}