Carregando página HTML com barra de progresso

Abrir no Editor Video Publique Seu Código

Recomendado

8 February 2025

Animação de carregamento CSS com imagem de fundo

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>

Carregando página HTML com barra de progresso

Recomendado

Círculo do seletor de cores

jogo de condução maladin

Animação de carregamento CSS com imagem de fundo

HTML

CSS

JS

Recomendado

Círculo do seletor de cores

jogo de condução maladin

Animação de carregamento CSS com imagem de fundo

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS