Chargement de la page HTML avec barre de progression

15,055 cvroon

Ouvrir dans l'éditeur Publiez votre code

Chargement de la page HTML avec barre de progression

Recommandé

12 June 2025

Un code de Mete

10 February 2025

informations sur la carte

9 December 2024

Comment animer la couleur d'arrière-plan

HTML

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CVROON Web Tools</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        /* CSS Reset ve Temel Stiller */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

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

/* LOADING EKRANI STİLLERİ */
        .loading-screen {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, #1e293b, #0f172a);
            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, #3b82f6, #8b5cf6, #ec4899);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            text-shadow: 0 5px 15px rgba(59, 130, 246, 0.3);
        }

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

.loader-circle {
            position: absolute;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            border: 4px solid transparent;
            border-top: 4px solid #3b82f6;
            animation: spin 1.5s linear infinite;
        }

.loader-circle:nth-child(2) {
            border-top-color: #8b5cf6;
            animation-delay: 0.1s;
            width: 85%;
            height: 85%;
            top: 7.5%;
            left: 7.5%;
        }

.loader-circle:nth-child(3) {
            border-top-color: #ec4899;
            animation-delay: 0.2s;
            width: 70%;
            height: 70%;
            top: 15%;
            left: 15%;
        }

@keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

.loading-text {
            font-size: 1.5rem;
            margin-bottom: 1.5rem;
            color: #cbd5e1;
            text-align: center;
        }

.loading-text .dots {
            display: inline-block;
            width: 40px;
            text-align: left;
        }

.loading-text .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-color: #334155;
            border-radius: 10px;
            overflow: hidden;
            margin-bottom: 1rem;
        }

.progress-bar {
            height: 100%;
            width: 0%;
            background: linear-gradient(90deg, #3b82f6, #8b5cf6, #ec4899);
            border-radius: 10px;
            transition: width 0.3s ease;
        }

.percentage {
            font-size: 1.2rem;
            font-weight: 600;
            color: #60a5fa;
        }

/* ANA SAYFA STİLLERİ */
        .main-content {
            display: none;
            opacity: 0;
            transition: opacity 0.8s ease;
        }

.main-content.visible {
            display: block;
            opacity: 1;
        }

.hero-section {
            padding: 4rem 2rem;
            text-align: center;
            background: linear-gradient(135deg, #1e293b, #0f172a);
            border-bottom: 1px solid #334155;
        }

.logo {
            font-size: 4rem;
            font-weight: 800;
            margin-bottom: 1rem;
            background: linear-gradient(90deg, #3b82f6, #8b5cf6, #ec4899);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            display: inline-block;
        }

.tagline {
            font-size: 1.5rem;
            color: #cbd5e1;
            margin-bottom: 2rem;
            max-width: 800px;
            margin-left: auto;
            margin-right: auto;
        }

.features {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 2rem;
            margin-top: 3rem;
            max-width: 1200px;
            margin-left: auto;
            margin-right: auto;
        }

.feature-card {
            background: rgba(30, 41, 59, 0.7);
            border-radius: 16px;
            padding: 2rem;
            width: 300px;
            text-align: center;
            border: 1px solid rgba(59, 130, 246, 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;
            margin-bottom: 1.5rem;
            color: #3b82f6;
        }

.feature-title {
            font-size: 1.5rem;
            margin-bottom: 1rem;
            color: #f8fafc;
        }

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

.telegram-section {
            text-align: center;
            padding: 4rem 2rem;
            background: rgba(15, 23, 42, 0.9);
        }

.telegram-title {
            font-size: 2.5rem;
            margin-bottom: 1.5rem;
            color: #f8fafc;
        }

.telegram-desc {
            font-size: 1.2rem;
            color: #94a3b8;
            max-width: 700px;
            margin: 0 auto 3rem;
            line-height: 1.6;
        }

.telegram-button {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            background: linear-gradient(90deg, #0088cc, #24a1de);
            color: white;
            padding: 18px 36px;
            font-size: 1.3rem;
            font-weight: 600;
            border-radius: 50px;
            text-decoration: none;
            transition: all 0.3s ease;
            box-shadow: 0 10px 25px rgba(0, 136, 204, 0.4);
            margin-top: 1rem;
        }

.telegram-button:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 30px rgba(0, 136, 204, 0.6);
            background: linear-gradient(90deg, #24a1de, #0088cc);
        }

.telegram-button i {
            font-size: 1.8rem;
        }

.footer {
            text-align: center;
            padding: 2rem;
            color: #64748b;
            font-size: 0.9rem;
            border-top: 1px solid #334155;
            margin-top: 3rem;
        }

/* Responsive Tasarım */
        @media (max-width: 768px) {
            .loading-logo, .logo {
                font-size: 2.5rem;
            }
            
            .tagline {
                font-size: 1.2rem;
            }
            
            .feature-card {
                width: 100%;
                max-width: 350px;
            }
            
            .telegram-title {
                font-size: 2rem;
            }
            
            .telegram-button {
                padding: 15px 30px;
                font-size: 1.1rem;
            }
        }
    </style>
</head>
<body>
    
    <div class="loading-screen" id="loadingScreen">
        <div class="loading-logo">CVROON</div>
        
        <div class="loader">
            <div class="loader-circle"></div>
            <div class="loader-circle"></div>
            <div class="loader-circle"></div>
        </div>
        
        <div class="loading-text">
            Sistem Hazırlanıyor<span class="dots"></span>
        </div>
        
        <div class="progress-container">
            <div class="progress-bar" id="progressBar"></div>
        </div>
        
        <div class="percentage" id="percentage">0%</div>
    </div>

<div class="main-content" id="mainContent">
        
        <section class="hero-section">
            <h1 class="logo">CVROON</h1>
            <p class="tagline">Profesyonel web araçları ve çözümlerle işinizi kolaylaştırın. Modern, hızlı ve güvenilir araçlarımızla verimliliğinizi artırın.</p>
            
            <div class="features">
                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="fas fa-bolt"></i>
                    </div>
                    <h3 class="feature-title">Hızlı Çözümler</h3>
                    <p class="feature-desc">Zaman kazandıran araçlarımızla işlerinizi hızla tamamlayın. Saniyeler içinde sonuç alın.</p>
                </div>
                
                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="fas fa-shield-alt"></i>
                    </div>
                    <h3 class="feature-title">Güvenli ve Özel</h3>
                    <p class="feature-desc">Verileriniz gizli kalır, asla paylaşılmaz. En yüksek güvenlik standartları ile korunur.</p>
                </div>
                
                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="fas fa-tools"></i>
                    </div>
                    <h3 class="feature-title">Zengin Araç Seti</h3>
                    <p class="feature-desc">Farklı ihtiyaçlarınız için özel olarak geliştirilmiş çok sayıda araç tek platformda.</p>
                </div>
            </div>
        </section>

<section class="telegram-section">
            <h2 class="telegram-title">Daha Fazlası Telegram'da!</h2>
            <p class="telegram-desc">CVROON Web Tools'un tüm özelliklerine, güncellemelere ve özel araçlara Telegram kanalımızdan ulaşabilirsiniz. Yeni araçlar, ipuçları ve özel içerikler için bizi takip edin.</p>
            
            <a href="https://t.me/cvronwebtool" target="_blank" class="telegram-button">
                <i class="fab fa-telegram"></i>
                Telegram Kanalımıza Katılın
            </a>
        </section>

<footer class="footer">
            <p>© 2023 CVROON Web Tools. Tüm hakları saklıdır.</p>
            <p style="margin-top: 10px;">Modern web çözümleri için doğru adres</p>
        </footer>
    </div>

CSS