Código de Carga con Círculos Moderno

Animación de Carga con Círculos

Creamos una carpeta para nuestro proyecto.
Dentro de la carpeta, crear un archivo index.html y styles.css.
Por último, vinculamos el archivo CSS al archivo HTML.

En este proyecto, creamos una animación de carga utilizando círculos que se expanden y contraen para proporcionar una indicación visual de que el sistema está en proceso de carga. Este tipo de animación es ideal para ser utilizada en cualquier página web donde se requiera que el usuario espere mientras se procesan datos o se cargan contenidos. La animación es sutil y moderna, adecuada para mejorar la experiencia del usuario en la interfaz de cualquier sitio web.

Código HTML

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Enlazamos los estilos CSS -->
    <link rel="stylesheet" href="styles.css">
    <title>Animación de Carga con Círculos</title>
</head>
<body>
    <section class="contenedor">
        <div class="contenedor-carga">
            <div class="circulo"></div>
            <div class="circulo"></div>
            <div class="circulo"></div>
        </div>
    </section>
</body>
</html>

Código CSS

*
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.contenedor {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f3f3f3;
}

.contenedor-carga {
    display: flex;
    gap: 10px;
}

.circulo {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #336699;
    animation: animacion 1.5s infinite ease-in-out;
}

.circulo:nth-child(1) {
    animation-delay: 0s;
}

.circulo:nth-child(2) {
    animation-delay: 0.3s;
}

.circulo:nth-child(3) {
    animation-delay: 0.6s;
}

@keyframes animacion {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.5);
    }
}