Fragmento de cargador animado CSS

724 codex

Abrir en el editor Publica tu código

Recomendado

23 July 2025

Estructura HTML del reproductor de iPod neumórfico

29 July 2025

Listado de tarjetas de empresa con marca y marketing

14 March 2026

La era de la guerra 2

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Modern Animated Loader</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

body {
            background-color: #0a0a0a;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
            font-family: 'Segoe UI', sans-serif;
        }

.loader-wrapper {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 2rem;
        }

/* The Spinner */
        .spinner {
            position: relative;
            width: 120px;
            height: 120px;
        }

.spinner span {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: 4px solid transparent;
            border-radius: 50%;
        }

.spinner span:nth-child(1) {
            border-top-color: #00d2ff;
            animation: rotate 2s linear infinite;
        }

.spinner span:nth-child(2) {
            width: 80%;
            height: 80%;
            top: 10%;
            left: 10%;
            border-bottom-color: #3a7bd5;
            animation: rotate-reverse 1.5s linear infinite;
        }

.spinner span:nth-child(3) {
            width: 60%;
            height: 60%;
            top: 20%;
            left: 20%;
            border-right-color: #00d2ff;
            animation: rotate 1s linear infinite;
        }

/* Loading Text */
        .text {
            color: #ffffff;
            font-size: 14px;
            font-weight: 300;
            letter-spacing: 5px;
            text-transform: uppercase;
            animation: fade 2s ease-in-out infinite;
        }

/* Glow Effect */
        .glow {
            position: absolute;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            box-shadow: 0 0 20px rgba(0, 210, 255, 0.2);
        }

@keyframes rotate {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

@keyframes rotate-reverse {
            0% { transform: rotate(360deg); }
            100% { transform: rotate(0deg); }
        }

@keyframes fade {
            0%, 100% { opacity: 0.3; transform: scale(0.95); }
            50% { opacity: 1; transform: scale(1); }
        }
    </style>
</head>
<body>

<div class="loader-wrapper">
        <div class="spinner">
            <div class="glow"></div>
            <span></span>
            <span></span>
            <span></span>
        </div>
        <div class="text">Loading</div>
    </div>

</body>
</html>

CSS