Exemple d'animation de chargement CSS

1,094 byby.createsite

Ouvrir dans l'éditeur Publiez votre code

Recommandé

23 September 2024

Societe de vente de produit locaux

10 December 2025

Code HTML du jeu aléatoire de football 1

12 December 2025

Simulateur de pizzeria FNAF

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