Site chargement + barre de progression

Open In Editor Video Publish Your Code

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

Site chargement + barre de progression

Recommended

Daniel'in Blog Web Sitesi

CodePen Home Premium Responsive Navbar

simple and descent registration form

HTML

CSS

JS

Recommended

Daniel'in Blog Web Sitesi

CodePen Home Premium Responsive Navbar

simple and descent registration form

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS