Fragmento de cargador animado CSS

362 codex

Abrir en el editor Video Publica tu código

Recomendado

22 May 2024

Formulario de inicio de sesión moderno

30 November 2025

Formulario de inicio de sesión HTML: nombre de usuario/correo electrónico y contraseña

31 January 2025

Películas de tarjetas CSS 3D puras

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>

Recomendado

Formulario de inicio de sesión moderno

Formulario de inicio de sesión HTML: nombre de usuario/correo electrónico y contraseña

Películas de tarjetas CSS 3D puras

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS