Animação de carregamento CSS com imagem de fundo

852 byby.createsite

Abrir no Editor Video Publique Seu Código

Animação de carregamento CSS com imagem de fundo

Recomendado

28 September 2025

Modelo HTML de loja de tênis para comércio eletrônico

5 June 2025

Um código de Mete

HTML

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

body {
            background:url("./thumb.jpg") no-repeat center center;
            background-color: #272822;
            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%);
            aspect-ratio: 9/16;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 50%;
            overflow: hidden;
            background: transparent;
        }

/* Animation */
        .loading-element {
            display: inline-block;
            position: relative;
            width: 2rem;
            height: 2rem;
            border-radius: 50%;
            animation: loading-animation 1s linear infinite;
        }

@keyframes loading-animation {
            0% {
                transform: scale(1);
            }
            50% {
                transform: scale(0.8);
                background-color: #66D9EF;
            }
            100% {
                transform: scale(1);
                background-color: #F92672;
            }
        }

/* Interdependent elements */
        .layer1 {
            position: relative;
            width: 4rem;
            height: 4rem;
            background-color: #66D9EF;
            border-radius: 50%;
        }

.layer1::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 1.2rem;
            height: 1.2rem;
            background-color: #F92672;
            border-radius: 50%;
        }

.layer2 {
            position: relative;
            width: 4rem;
            height: 4rem;
            background-color: #F92672;
            border-radius: 50%;
            top: 2rem;
            left: 2rem;
        }

.layer2::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 1.2rem;
            height: 1.2rem;
            background-color: #66D9EF;
            border-radius: 50%;
        }

/* Micro-detail */
        @keyframes micro-detail {
            0% {
                transform: translateY(0);
            }
            100% {
                transform: translateY(-0.5rem);
            }
        }

.micro-detail {
            position: absolute;
            top: 80%;
            left: 50%;
            transform: translate(-50%, -0.5rem);
            width: 0.5rem;
            height: 0.5rem;
            background-color: #A6E22E;
            animation: micro-detail 1s linear infinite;
        }
    </style>
</head>
<body>

<div class="animation-container">
        <div class="loading-element layer1">
        </div>
        <div class="loading-element layer2">
        </div>
        <div class="micro-detail">
        </div>
    </div>
</body>
</html>
```

CSS

* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
  			background: black;
            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: 0 4px 12px rgba(0, 0, 0, 0.3);
        }
        
        .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: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            aspect-ratio: 9/16;
            height: 90vh;
            overflow: hidden;
            background: transparent;
        }
        
        @keyframes loading-animation {
            0% {
                transform: scale(1) rotate(0deg);
                background-size: 200px 200px;
            }
            25% {
                transform: scale(1.2) rotate(90deg);
                background-size: 220px 220px;
            }
            50% {
                transform: scale(1) rotate(180deg);
                background-size: 240px 240px;
            }
            100% {
                transform: scale(1) rotate(360deg);
                background-size: 260px 260px;
            }
        }
        
        @keyframes branching {
            0% {
                transform: scale(1);
            }
            100% {
                transform: scale(2);
            }
        }
        
        .loading-element {
            position: relative;
            width: 60px;
            height: 60px;
            background-size: 200px 200px;
            border-radius: 50%;
            animation: loading-animation 1s linear infinite;
        }
        
        .loading-element:before {
            content: "";
            position: absolute;
            width: 30px;
            height: 30px;
            background-color: red;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            animation: loading-animation 1s linear infinite;
        }
        
        .loading-element:after {
            content: "";
            position: absolute;
            width: 20px;
            height: 20px;
            background-color: transparent;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            animation: loading-animation 1s linear infinite;
        }
        
        .branching-element {
            position: relative;
            width: 40px;
            height: 40px;
            background-size: 100px 100px;
            border-radius: 50%;
            animation: branching 2s linear infinite;
        }
        
        .branching-element:before, .branching-element:after {
            content: "";
            position: absolute;
            width: 20px;
            height: 20px;
            background-color: white;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            animation: branching 2s linear infinite;
        }
        
        .branching-element:before:before, .branching-element:before:after, .branching-element:after:before, .branching-element:after:after {
            content: "";
            position: absolute;
            width: 10px;
            height: 10px;
            background-color: red;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            animation: branching 2s linear infinite;
        }
        
        /* A cada rodada, adiciona uma camada nova. Isso simboliza o crescimento do entendimento e a multiplicação das ideias. */
        @keyframes crescimento {
            0% {
                transform: scale(1);
            }
            100% {
                transform: scale(2);
            }
        }
        
        .crescende {
            position: relative;
            width: 20px;
            height: 20px;
            background-size: 40px 40px;
            border-radius: 50%;
            animation: crescimento 3s linear infinite;
        }
        
        .crescende:before, .crescende:after {
            content: "";
            position: absolute;
            width: 10px;
            height: 10px;
            background-color: transparent;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            animation: crescimento 3s linear infinite;
        }
        
        /* Com a cada nova ideia, sentimo uma sensação de liberdade e crescimento. */
        
        /* A cada rodada, a carga é maior, representando o aumento da sabedoria e a busca pela perfeição. */
        
        .carregamento {
            position: relative;
            width: 50%;
            height: 50%;
            background-size: 100px 100px;
            border-radius: 50%;
            animation: loading-animation 2s linear infinite;
        }
        
        .carregamento:before {
            content: "";
            position: absolute;
            width: 25%;
            height: 25%;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: linear-gradient(to bottom right, #03A9F4, #3F87F5);
            animation: crescimento 2s linear infinite;
        }
        
        .carregamento:after {
            content: "";
            position: relative;
            width: 10%;
            height: 10%;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: linear-gradient(to bottom right, #03A9F4, #3F87F5);
            animation: crescimento 2s linear infinite;
        }

Animação de carregamento CSS com imagem de fundo

Recomendado

Modelo HTML de loja de tênis para comércio eletrônico

Um Código de Yotva

Um código de Mete

HTML

CSS

JS

Recomendado

Modelo HTML de loja de tênis para comércio eletrônico

Um Código de Yotva

Um código de Mete

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS