Animación de carga con IA HTML CSS JavaScript

401 Codex7

Abrir en el editor Publica tu código

Animación de carga con IA HTML CSS JavaScript

Recomendado

13 June 2025

Un código de Metehan

12 September 2025

Efecto de animación de brillo circular CSS

12 May 2025

escaleras ilusorias

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