CSS Loading Animation with Background Image

Open In Editor Publish Your Code

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 Loading Animation with Background Image

Recommended

Website Template HTML & CSS

CSS Sprite-Animation Switcher

Half-Tone Image Editor

HTML

CSS

JS

Recommended

Website Template HTML & CSS

CSS Sprite-Animation Switcher

Half-Tone Image Editor

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS