Animación de carga con IA HTML CSS JavaScript

540 Codex7

Abrir en el editor Publica tu código

Animación de carga con IA HTML CSS JavaScript

Recomendado

15 December 2025

Botón de luz HTML con icono y texto

12 May 2026

Juego Five Nights at Freddy's HTML: Oficina, cámaras, susto repentino

26 February 2024

Formulario de inicio de sesión HTML CSS

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI System Loading</title>
    <style>
        :root {
            --bg-color: #05070a;
            --primary-glow: #00f2ff;
            --secondary-glow: #7000ff;
            --text-color: #e0e0e0;
        }

body, html {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: var(--bg-color);
            font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
            overflow: hidden;
        }

.container {
            text-align: center;
            position: relative;
        }

/* The Core AI Ring */
        .loader-wrapper {
            position: relative;
            width: 200px;
            height: 200px;
            margin: 0 auto 30px;
        }

.ring {
            position: absolute;
            border: 2px solid transparent;
            border-radius: 50%;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

.ring-outer {
            width: 180px;
            height: 180px;
            border-top: 2px solid var(--primary-glow);
            animation: rotate 2s linear infinite;
            box-shadow: 0 0 15px rgba(0, 242, 255, 0.2);
        }

.ring-middle {
            width: 140px;
            height: 140px;
            border-left: 2px solid var(--secondary-glow);
            animation: rotate 1.5s linear infinite reverse;
            box-shadow: 0 0 15px rgba(112, 0, 255, 0.2);
        }

.ring-inner {
            width: 100px;
            height: 100px;
            border-right: 2px solid var(--primary-glow);
            animation: rotate 1s linear infinite;
        }

.core-pulse {
            position: absolute;
            width: 40px;
            height: 40px;
            background: var(--primary-glow);
            border-radius: 50%;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            box-shadow: 0 0 30px var(--primary-glow), 0 0 60px var(--secondary-glow);
            animation: pulse 2s ease-in-out infinite;
        }

/* Text Styling */
        .status-text {
            color: var(--text-color);
            font-size: 1.2rem;
            letter-spacing: 3px;
            text-transform: uppercase;
            margin-bottom: 10px;
            height: 1.5em;
        }

.sub-text {
            color: rgba(255, 255, 255, 0.5);
            font-size: 0.8rem;
            font-family: monospace;
        }

.progress-container {
            width: 250px;
            height: 2px;
            background: rgba(255, 255, 255, 0.1);
            margin: 20px auto;
            position: relative;
            overflow: hidden;
        }

.progress-bar {
            position: absolute;
            height: 100%;
            width: 0%;
            background: linear-gradient(90deg, var(--secondary-glow), var(--primary-glow));
            box-shadow: 0 0 10px var(--primary-glow);
            transition: width 0.4s ease;
        }

/* Animations */
        @keyframes rotate {
            from { transform: translate(-50%, -50%) rotate(0deg); }
            to { transform: translate(-50%, -50%) rotate(360deg); }
        }

@keyframes pulse {
            0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.8; }
            50% { transform: translate(-50%, -50%) scale(1.2); opacity: 1; }
        }

/* Scanning Line Effect */
        .scan-line {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(to bottom, transparent, rgba(0, 242, 255, 0.05), transparent);
            animation: scan 3s linear infinite;
            pointer-events: none;
        }

@keyframes scan {
            0% { transform: translateY(-100%); }
            100% { transform: translateY(100%); }
        }
    </style>
</head>
<body>

<div class="status-text" id="status">Initializing AI...</div>
        
        <div class="progress-container">
            <div class="progress-bar" id="progress"></div>
        </div>

<div class="sub-text" id="sub-status">Neural pathways connecting...</div>
    </div>

const loadingPhases = [
            { status: "Initializing Core", sub: "Loading neural weights...", progress: 15 },
            { status: "Analyzing Context", sub: "Parsing request parameters...", progress: 35 },
            { status: "Generating Logic", sub: "Optimizing synaptic response...", progress: 60 },
            { status: "Rendering Output", sub: "Finalizing data structures...", progress: 85 },
            { status: "System Ready", sub: "Establishing secure link...", progress: 100 }
        ];

let phaseIndex = 0;

// Start the simulation
        setTimeout(updateLoader, 500);
    </script>
</body>
</html>

CSS