La animación Dot Loading se puede usar para mejorar la interfaz de usuario de un sitio web, se puede agregar mientras se carga el sitio web. Esta animación se puede crear fácilmente usando HTML y CSS.
Código HTML: en esta sección, crearemos la estructura básica del cargador de puntos utilizando una etiqueta div que tendrá algunas etiquetas de intervalo dentro.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Dots Loading Animation</title> </head> <style> <body> <div class="loader"> <span></span> <span ></span> <span ></span> <span ></span> <span></span> <span></span> </div> </body> </html>
Código CSS: en esta sección, primero crearemos la estructura de puntos usando algunas propiedades básicas de CSS y luego, para crear la animación, usaremos la regla @keyframes y usaremos la función transformX() para producir el efecto deseado.
<style>
body{
margin: 0;
padding: 0;
}
.loader{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
align-items: center;
}
/* Creating the dots */
span{
height: 25px;
width: 25px;
margin-right: 10px;
border-radius: 50%;
background-color: green;
animation: loading 1s linear infinite;
}
/* Creating the loading animation*/
@keyframes loading {
0%{
transform: translateX(0);
}
25%{
transform: translateX(15px);
}
50%{
transform: translateX(-15px);
}
100%{
transform: translateX(0);
}
}
span:nth-child(1){
animation-delay: 0.1s;
}
span:nth-child(2){
animation-delay: 0.2s;
}
span:nth-child(3){
animation-delay: 0.3s;
}
span:nth-child(4){
animation-delay: 0.4s;
}
span:nth-child(5){
animation-delay: 0.5s;
}
</style>
Código completo: es la combinación de las dos secciones de código anteriores.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>Dots loading animation</title>
</head>
<style>
body{
margin: 0;
padding: 0;
}
.loader{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
align-items: center;
}
/* Creating the dots */
span{
height: 25px;
width: 25px;
margin-right: 10px;
border-radius: 50%;
background-color: green;
animation: loading 1s linear infinite;
}
/* Creating the loading animation*/
@keyframes loading {
0%{
transform: translateX(0);
}
25%{
transform: translateX(15px);
}
50%{
transform: translateX(-15px);
}
100%{
transform: translateX(0);
}
}
span:nth-child(1){
animation-delay: 0.1s;
}
span:nth-child(2){
animation-delay: 0.2s;
}
span:nth-child(3){
animation-delay: 0.3s;
}
span:nth-child(4){
animation-delay: 0.4s;
}
span:nth-child(5){
animation-delay: 0.5s;
}
</style>
<body>
<div class="loader">
<span></span>
<span ></span>
<span ></span>
<span ></span>
<span></span>
<span></span>
</div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por lakshgoel204 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA