Esempio di animazione di caricamento CSS

Apri nell'Editor Video Pubblica il Tuo Codice

Consigliato

25 March 2025

Un codice di andrej.social.network

28 July 2025

```html
<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Resposta</title>
    <style>
        /* Base de cores para os elementos */
        :root {
            --cor-primaria: #f92672;
            --cor-secundaria: #66d9ef;
            --cor-terciaria: #ae81ff;
        }

/* Estilos básicos */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

body {
            background: url("https://vinixodin.com/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; }

/* Container da animação */
        .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;
        }

/* Elemento principal da animação */
        .loading-element {
            border-radius: 50%;
            animation: loading-animation 1s linear infinite;
        }

@keyframes loading-animation {
            0% {
                transform: scale(0.5);
                top: 50%;
                left: 50%;
                opacity: 0;
            }

50% {
                transform: scale(1.2);
                top: 45%;
                left: 55%;
                opacity: 1;
            }

100% {
                transform: scale(0.5);
                top: 50%;
                left: 50%;
                opacity: 0;
            }
        }

/* Pseudo-elementos para criar sombras e efeitos */
        .loading-element::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: var(--cor-primaria);
            border-radius: 50%;
            transform: scale(1.2);
            animation: loading-shadow 1s linear infinite;
        }

@keyframes loading-shadow {
            0% {
                transform: scale(0.5) rotate(0deg);
            }

100% {
                transform: scale(0.5) rotate(360deg);
            }
        }

.loading-element::after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: var(--cor-terciaria);
            border-radius: 50%;
            transform: scale(0.8);
            animation: loading-reflex 1s linear infinite;
        }

@keyframes loading-reflex {
            0% {
                transform: scale(1) rotate(0deg);
            }

100% {
                transform: scale(1) rotate(180deg);
            }
        }

/* Elemento de micro-detalhe */
        .micro-detail {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: var(--cor-secundaria);
            border-radius: 50%;
            width: 10px;
            height: 10px;
            animation: micro-detail-animation 1s linear infinite;
        }

@keyframes micro-detail-animation {
            0% {
                transform: translate(-50%, -50%);
                opacity: 0;
            }

50% {
                transform: translate(-50%, -50%) scale(1.3);
                opacity: 1;
            }

100% {
                transform: translate(-50%, -50%) scale(1);
                opacity: 0;
            }
        }

/* Exemplo de código */
        .codigo {
            <span class="selector">.loading-element</span><span class="brace">{</span>
            <span class="property">border-radius</span>: <span class="value-number">50%</span>;
            <span class="property">animation</span>: <span class="function">loading-animation</span> <span class="value-number">1s</span> <span class="value-string">linear</span> <span class="value-string">infinite</span>;
            <span class="property">animation</span>: <span class="function">loading-shadow</span> <span class="value-number">1s</span> <span class="value-string">linear</span> <span class="value-string">infinite</span>;
            <span class="brace">}</span>
        }
    </style>
</head>
<body>
    <div class="animation-container">
        <div class="loading-element" id="loading-element"></div>
        <div class="loading-element" id="loading-element-2"></div>
        <div class="loading-element" id="loading-element-3"></div>
        <div class="micro-detail" id="micro-detail"></div>
    </div>

</body>
</html>
```

CSS

/* 
  Base foundation
*/
* {
  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;
  aspect-ratio: 9/16;
}

.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;
  aspect-ratio: 9/16;
}

/* 
  Layers e motivação emocional
*/
.loading-element {
  background-color: #333333;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  animation: loading-animation 1s linear infinite;
  position: relative;
}

@keyframes loading-animation {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}

.layer1 {
  width: 100%;
  height: 100%;
  background-color: #4D4D4D;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 1s;
}

.layer1::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #3F3F3F;
  width: 20px;
  height: 20px;
  border-radius: 50%;
}

/* 
  Micro-detalhes para o replay value
*/
.layer2 {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #3F3F3F;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  animation: detalhe 2s linear infinite;
}

@keyframes detalhe {
  50% {
    transform: scale(1);
    background-color: #666666;
  }
  100% {
    transform: scale(0);
    background-color: #3F3F3F;
  }
}

/* 
  Interações entre camadas e elementos
*/
.layer3 {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #2F2F2F;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: interacao 2s linear infinite;
}

@keyframes interacao {
  50% {
    transform: scale(1);
    background-color: #777777;
  }
  100% {
    transform: scale(0);
    background-color: #2F2F2F;
  }
}

Esempio di animazione di caricamento CSS

Consigliato

Un codice di andrej.social.network

codice bloom

Un codice di Metehan

HTML

CSS

JS

Consigliato

Un codice di andrej.social.network

codice bloom

Un codice di Metehan

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS