पृष्ठभूमि छवि के साथ CSS लोडिंग एनीमेशन

23 ByBy.inc

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

अनुशंसित

25 September 2025

साइडबार के साथ HTML एडमिन डैशबोर्ड टेम्पलेट

29 August 2025

CSS मेमोरी एनिमेशन स्निपेट

HTML

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

body {
            background:url("./thumb.jpg") no-repeat center center;
            background-color: black;
            background-size: cover;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh;
            overflow: hidden;
        }

.codigo {
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            background: #272822;
            color: #F8F8F2;
            font-family: 'Consolas', 'Monaco', monospace;
            font-size: 18px;
            padding: 20px;
            border-radius: 8px;
            white-space: pre-line;
            text-align: left;
            line-height: 1.6;
            max-height: 25%;
            max-width: 75%;
            width: 75%;
            height: 25%;
            top: 15%;
            overflow-y: hidden;
            box-shadow: -8px 10px 18px rgba(0, 0, 0, 0.55);
        }

.selector       { color: #F92672; }
        .property       { color: #66D9EF; }
        .value-number   { color: #AE81FF; }
        .value-string   { color: #E6DB74; }
        .value-color    { color: #A6E22E; }
        .function       { color: #A6E22E; }

.animation-container {
            position: absolute;
            top: 75%;
            left: 50%;
            transform: translate(-50%, -50%);
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 50%;
            overflow: hidden;
            background: transparent;
        }

.loading-element {
            position: relative;
            width: 200px;
            height: 200px;
            border-radius: 50%;
            background-color: #333;
            animation: loading-animation 1s linear infinite;
        }

@keyframes loading-animation {
            0% {
                transform: scale(1);
                background-color: #333;
            }
            50% {
                transform: scale(1.2);
                background-color: #555;
            }
            100% {
                transform: scale(1);
                background-color: #333;
            }
        }

.loading-element::before {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 100%;
            height: 100%;
            border-radius: 50%;
            border: 20px solid #ccc;
            border-top: 20px solid #fff;
            animation: loading-animation 1s linear infinite;
        }

.loading-element::before {
            z-index: 2;
        }

.loading-element::after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #666;
            opacity: 0.5;
            transform: scale(1);
            animation: loading-animation 1s linear infinite;
        }

@keyframes loading-animation {
            0% {
                transform: scale(1);
                background-color: #666;
            }
            50% {
                transform: scale(1.2);
                background-color: #777;
            }
            100% {
                transform: scale(1);
                background-color: #666;
            }
        }

.loading-element .line-1 {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 5px;
            background-color: #fff;
            animation: loading-animation 1s linear infinite;
        }

.loading-element .line-2 {
            position: absolute;
            top: 50%;
            left: 0;
            width: 100%;
            height: 5px;
            background-color: #fff;
            animation: loading-animation 1s linear infinite;
        }

.loading-element .line-3 {
            position: absolute;
            top: 100%;
            left: 0;
            width: 100%;
            height: 5px;
            background-color: #fff;
            animation: loading-animation 1s linear infinite;
        }

@media (orientation: portrait) {
            .loading-element {
                transform: scale(0.5);
            }
            .loading-element::before {
                width: 50%;
                height: 50%;
                border: 10px solid #ccc;
                border-top: 10px solid #fff;
            }
            .loading-element::after {
                transform: scale(0.5);
            }
            .loading-element .line-1 {
                width: 50%;
            }
            .loading-element .line-2 {
                width: 50%;
            }
            .loading-element .line-3 {
                width: 50%;
            }
        }

</style>
</head>
<body>

CSS

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

body{
    background: rgb(251, 247, 247);
      overflow-x: hidden; }

}

.band{
    color: white;
    background-color: blueviolet;
    height: 30px ;

}

.band h1{
    padding: 10px;
    font: 1em sans-serif;
    text-align: center;
}

.logo{
    font-family: sans-serif;
    font-size: large;
    text-align: center;
    padding: 30px;

}

nav{
    height: 80px;
    background-color: rgb(251, 251, 251)
}
.hero{
    height: 400px;
    background-color: white;
    display: flex;
}

.hero .container{
display: flex;
height: 98%;
width: 100%;

}

.container img{
    width: 100%;
}

.content{
    align-items: center;
    display: flex;
    flex-direction: column;
    color: white;
    font-family: sans-serif;
    font-size: 40px;
    margin-top: -200px;
}

.content button{
height: 40px;
width: 150px;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
background-color: white;
color: black;
border:none;
border-radius: 3px;
}

.title{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top:130px;
}

.title h1{
    font-family: sans-serif;
    font-size: 25px;
    margin-bottom: 50px;
}

.product{
    background-color: rgb(255, 255, 255);
    border-radius: 10px;
    height: 320px;
    width: 200px;
    flex-direction: column;
    display: flex;
}
.product img{
    height: 200px;
}
.product button{
    height: 50px;
    width: 200px;
    background-color: rgb(51, 47, 47);
    color: #ffffff;
    border: none;

}
.product h2{
margin-top: 20px;
color: rgb(0, 0, 0);
font-family: sans-serif;
font-size: 15px;
margin-bottom: 20px;
text-align: center;

}
.product p{
    font-family: sans-serif;
    font-size: 15px;
    position: relative;
    color: rgb(0, 0, 0);
    left: 160px;
    
}

.product-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

.product {
    margin: 10px;
}

पृष्ठभूमि छवि के साथ CSS लोडिंग एनीमेशन

अनुशंसित

CSS लोडिंग एनीमेशन स्निपेट

साइडबार के साथ HTML एडमिन डैशबोर्ड टेम्पलेट

CSS मेमोरी एनिमेशन स्निपेट

HTML

CSS

JS

अनुशंसित

CSS लोडिंग एनीमेशन स्निपेट

साइडबार के साथ HTML एडमिन डैशबोर्ड टेम्पलेट

CSS मेमोरी एनिमेशन स्निपेट

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS