Carga del sitio + barra de progreso

374 Skyrreum

Abrir en el editor Video Publica tu código

Recomendado

25 September 2025

Fragmento de animación de carga de CSS

18 December 2025

Código fuente HTML5 del juego Bloodmoney

11 January 2024

Pantalla de Carga de Puntos

HTML

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Skyrreum chargement + barre</title>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

<style>
        /* ===== RESET ===== */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

body {
            background-color: #2a0f0f;
            color: #f8fafc;
            min-height: 100vh;
            overflow-x: hidden;
        }

/* ===== LOADING SCREEN ===== */
        .loading-screen {
            position: fixed;
            inset: 0;
            background: linear-gradient(135deg, #570f0f, #330909);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            z-index: 1000;
            transition: opacity 0.8s ease, visibility 0.8s ease;
        }

.loading-screen.hidden {
            opacity: 0;
            visibility: hidden;
        }

.loading-logo {
            font-size: 3.5rem;
            font-weight: 800;
            margin-bottom: 1.5rem;
            background: linear-gradient(90deg, #f63b3b, #800000, #000000);
            -webkit-background-clip: text;
            color: transparent;
        }

.loader {
            width: 80px;
            height: 80px;
            position: relative;
            margin-bottom: 2rem;
        }

.loader-circle {
            position: absolute;
            inset: 0;
            border-radius: 50%;
            border: 4px solid transparent;
            border-top: 4px solid #f63b3b;
            animation: spin 1.5s linear infinite;
        }

.loader-circle:nth-child(2) {
            border-top-color: #800000;
            inset: 7.5%;
        }

.loader-circle:nth-child(3) {
            border-top-color: #000000;
            inset: 15%;
        }

@keyframes spin {
            to { transform: rotate(360deg); }
        }

.loading-text {
            font-size: 1.4rem;
            color: #cbd5e1;
            margin-bottom: 1rem;
        }

.dots::after {
            content: '';
            animation: dots 1.5s steps(4, end) infinite;
        }

@keyframes dots {
            0%,20% { content: ''; }
            40% { content: '.'; }
            60% { content: '..'; }
            80%,100% { content: '...'; }
        }

.progress-container {
            width: 300px;
            height: 8px;
            background: #553333;
            border-radius: 10px;
            overflow: hidden;
        }

.progress-bar {
            height: 100%;
            width: 0%;
            background: linear-gradient(90deg, #f63b3b, #800000, #000000);
            transition: width 0.3s ease;
        }

.percentage {
            margin-top: 10px;
            color: #ffffff;
            font-weight: 600;
        }

/* ===== MAIN CONTENT ===== */
        .main-content {
            display: none;
            opacity: 0;
            transition: opacity 0.8s ease;
        }

.main-content.visible {
            display: block;
            opacity: 1;
            animation: fadeIn 1s ease;
        }

@keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }

/* ===== HERO ===== */
        .hero-section {
            padding: 4rem 2rem;
            text-align: center;
            border-bottom: 1px solid #ffffff;
        }

.logo {
            font-size: 4rem;
            font-weight: 800;
            background: linear-gradient(90deg, #f63b3b, #800000, #000000);
            -webkit-background-clip: text;
            color: transparent;
        }

.tagline {
            max-width: 800px;
            margin: 1.5rem auto 3rem;
            color: #cbd5e1;
            font-size: 1.4rem;
        }

.features {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 2rem;
        }

.feature-card {
            width: 300px;
            padding: 2rem;
            border-radius: 16px;
            background: rgba(59, 30, 30, 0.7);
            border: 1px solid rgba(246, 59, 59, 0.2);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

.feature-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 30px rgba(0,0,0,0.4);
        }

.feature-icon {
            font-size: 3rem;
            color: #ffffff;
            margin-bottom: 1rem;
        }

.feature-title {
            font-size: 1.4rem;
            margin-bottom: 0.5rem;
        }

.feature-desc {
            color: #94a3b8;
        }

/* ===== TELEGRAM ===== */
        .telegram-section {
            text-align: center;
            padding: 4rem 2rem;
        }

.telegram-button {
            display: inline-flex;
            align-items: center;
            gap: 12px;
            margin-top: 2rem;
            padding: 18px 36px;
            border-radius: 50px;
            background: linear-gradient(90deg, #0088cc, #24a1de);
            color: #fff;
            font-size: 1.2rem;
            text-decoration: none;
            box-shadow: 0 10px 25px rgba(255, 255, 255, 0.4);
            transition: transform 0.3s ease;
        }

.discord-button {
            display: inline-flex;
            align-items: center;
            gap: 12px;
            margin-top: 2rem;
            padding: 18px 36px;
            border-radius: 50px;
            background: linear-gradient(90deg, #0014cc, #000c75);
            color: #fff;
            font-size: 1.2rem;
            text-decoration: none;
            box-shadow: 0 10px 25px rgba(255, 255, 255, 0.4);
            transition: transform 0.3s ease;
        }

.telegram-button:hover {
            transform: translateY(-5px);
        }

.discord-button:hover {
            transform: translateY(-5px);
        }

.footer {
            text-align: center;
            padding: 2rem;
            font-size: 0.9rem;
            color: #64748b;
            border-top: 1px solid #ffffff;
        }
    </style>
</head>
<body>

<div class="loading-screen" id="loadingScreen">
        <div class="loading-logo">SKYRREUM</div>

<div class="loading-text">Le système se prépare<span class="dots"></span></div>

<div class="main-content" id="mainContent">

<section class="hero-section">
            <h1 class="logo">SKYRREUM</h1>
            <p class="tagline">
                Accélérez votre activité grâce à des outils web professionnels.
            </p>

<div class="features">
                <div class="feature-card">
                    <div class="feature-icon"><i class="fas fa-bolt"></i></div>
                    <h3 class="feature-title">Rapide</h3>
                    <p class="feature-desc">Résultats en quelques secondes..</p>
                </div>

<div class="feature-card">
                    <div class="feature-icon"><i class="fas fa-shield-alt"></i></div>
                    <h3 class="feature-title">Digne de confiance</h3>
                    <p class="feature-desc">Vos données sont protégées.</p>
                </div>

<div class="feature-card">
                    <div class="feature-icon"><i class="fas fa-tools"></i></div>
                    <h3 class="feature-title">Outils</h3>
                    <p class="feature-desc">Tout au même endroit.</p>
                </div>
            </div>
        </section>

<section class="telegram-section">
            <h2>Votre telegram</h2>
            <a href="https://t.me/" target="_blank" class="telegram-button">
                <i class="fab fa-telegram"></i> Your telegram
            </a>
            <a href="https://discord/" target="_blank" class="discord-button">
                <i class="fab fa-discord"></i> Your discord
            </a>
        </section>

<script>
        document.addEventListener('DOMContentLoaded', () => {
            const loadingScreen = document.getElementById('loadingScreen');
            const mainContent = document.getElementById('mainContent');
            const progressBar = document.getElementById('progressBar');
            const percentage = document.getElementById('percentage');

let progress = 0;

const interval = setInterval(() => {
                progress = Math.min(progress + Math.random() * 8 + 2, 100);
                progressBar.style.width = progress + '%';
                percentage.textContent = Math.floor(progress) + '%';

if (progress >= 100) {
                    clearInterval(interval);
                    loadingScreen.classList.add('hidden');
                    setTimeout(() => mainContent.classList.add('visible'), 500);
                }
            }, 150);
        });
    </script>
</body>
</html>

Recomendado

Fragmento de animación de carga de CSS

Código fuente HTML5 del juego Bloodmoney

Pantalla de Carga de Puntos

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS