Cargando página HTML con barra de progreso

14,758 cvroon

Abrir en el editor Publica tu código

Cargando página HTML con barra de progreso

Recomendado

30 August 2024

Botón de neón

29 September 2025

Animación de carga CSS con imagen de fondo

19 July 2025

Fragmento HTML de animación de texto 3D

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