प्रोग्रेस बार के साथ पेज का HTML लोड हो रहा है

5759 cvroon

संपादक में खोलें अपना कोड प्रकाशित करें

प्रोग्रेस बार के साथ पेज का HTML लोड हो रहा है

अनुशंसित

13 July 2024

Google लॉगिन और रिस्पॉन्सिव मेनू HTML कोड

31 July 2025

HTML नियॉन बटन उदाहरण

HTML

CSS

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d);
    background-size: 400% 400%;
    animation: gradientBG 10s ease infinite;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    color: white;
}

@keyframes gradientBG {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.loading-container {
    text-align: center;
    max-width: 400px;
    width: 90%;
    padding: 30px;
    background-color: rgba(0, 0, 0, 0.7);
    border-radius: 20px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
}

.loader {
    margin: 0 auto 30px;
    width: 100px;
    height: 100px;
    position: relative;
}

.spinner {
    width: 100%;
    height: 100%;
    border: 8px solid rgba(255, 255, 255, 0.1);
    border-top: 8px solid #ffffff;
    border-radius: 50%;
    animation: spin 1.5s linear infinite;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
}

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

.loading-text {
    font-size: 28px;
    font-weight: 300;
    margin-bottom: 25px;
    letter-spacing: 2px;
    position: relative;
    display: inline-block;
}

.loading-text::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: 100%;
    height: 12px;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 15px;
}

.progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #1a2a6c, #b21f1f, #fdbb2d);
    border-radius: 10px;
    transition: width 0.3s ease;
    box-shadow: 0 0 10px rgba(253, 187, 45, 0.5);
}

.percentage {
    font-size: 24px;
    font-weight: 600;
    color: #fdbb2d;
    text-shadow: 0 0 10px rgba(253, 187, 45, 0.7);
}

JS

अनुशंसित

एनिमेटेड डाउनलोड बटन

Google लॉगिन और रिस्पॉन्सिव मेनू HTML कोड

HTML नियॉन बटन उदाहरण

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS