Ejemplo de animación de carga CSS

1,290 byby.createsite

Abrir en el editor Publica tu código

Recomendado

20 December 2024

Un código de staticclass394

26 June 2025

Creador de sitios web con IA | Arrastrar y soltar | WebMaster

4 September 2025

Fragmento HTML de animación de puerta de habitación CSS

HTML

```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;
  }
}