Animation de chargement IA HTML CSS JavaScript

466 Codex7

Ouvrir dans l'éditeur Publiez votre code

Animation de chargement IA HTML CSS JavaScript

Recommandé

12 January 2026

Jeu HTML5 Friday Night Funkin' Impostor Mod

21 December 2024

Un code par cleancloud166

30 May 2026

Exemple de modèle de site web HTML basique

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