Carga del sitio + barra de progreso

514 Skyrreum

Abrir en el editor Publica tu código

Recomendado

28 August 2024

Héroe del eclipse

23 June 2025

Un código de Mete

29 December 2024

ki ok día de Nueva Jersey

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>

CSS