AI Loading Animation HTML CSS JavaScript

298 Codex7

<!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

AI Loading Animation HTML CSS JavaScript

Recommended