Animación de carga con IA HTML CSS JavaScript

397 Codex7

Abrir en el editor Publica tu código

Animación de carga con IA HTML CSS JavaScript

Recomendado

29 April 2025

Sitio web con IA (NO FUNCIONA)

5 May 2026

Juegos desbloqueados: Juega gratis a juegos online en GN-Math

2 February 2026

Integrar el emulador de Super Smash Bros. de N64

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