Estrutura HTML de animação de carregamento CSS

687 byby.createsite

Abrir no Editor Publique Seu Código

Estrutura HTML de animação de carregamento CSS

Recomendado

21 June 2025

Contêiner de efeitos de luz HTML com CSS

30 June 2025

Produção de aço, indústria metalúrgica | Iron and Steel Inc.

27 September 2025

Animação de carregamento CSS: fluxo de memória e reflexão

HTML

CSS

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

.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: #E6DB74;
    animation: loading-animation 1s linear infinite;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2), 0 0 50px rgba(0, 0, 0, 0.5), 0 0 100px rgba(255, 255, 255, 0.5);
  }

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

@keyframes fragment-disappearance {
    0% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }

.fragment-1 {
    position: relative;
    width: 80px;
    height: 100px;
    border-radius: 10px;
    background-color: #66D9EF;
    transform: rotate(25deg);
    animation: fragment-animation 3s linear infinite;
  }

@keyframes fragment-animation {
    0% {
      transform: rotate(25deg) scale(1);
      bottom: -100px;
    }
    20% {
      transform: rotate(25deg) scale(1.5);
      bottom: 150px;
    }
    40% {
      transform: rotate(25deg) scale(1);
      bottom: -100px;
    }
    60% {
      transform: rotate(25deg) scale(0.5);
      bottom: -150px;
    }
    100% {
      transform: rotate(25deg) scale(1);
      bottom: -100px;
    }
  }

@keyframes fragment-disappearance {
    0% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }

.fragment-2 {
    position: relative;
    width: 120px;
    height: 80px;
    border-radius: 10px;
    background-color: #F92672;
    transform: rotate(-30deg);
    animation: fragment-animation-2 2s linear infinite;
  }

@keyframes fragment-animation-2 {
    0% {
      transform: rotate(-30deg) scale(1);
      bottom: -80px;
    }
    20% {
      transform: rotate(-30deg) scale(1.2);
      bottom: 50px;
    }
    40% {
      transform: rotate(-30deg) scale(1);
      bottom: -80px;
    }
    60% {
      transform: rotate(-30deg) scale(0.8);
      bottom: -130px;
    }
    100% {
      transform: rotate(-30deg) scale(1);
      bottom: -80px;
    }
  }

.fragment-3 {
    position: relative;
    width: 150px;
    height: 60px;
    border-radius: 10px;
    background-color: #3E8E41;
    transform: rotate(45deg);
    animation: fragment-animation-3 4s linear infinite;
  }

@keyframes fragment-animation-3 {
    0% {
      transform: rotate(45deg) scale(1);
      bottom: -60px;
    }
    25% {
      transform: rotate(45deg) scale(1.1);
      bottom: 30px;
    }
    50% {
      transform: rotate(45deg) scale(1);
      bottom: -60px;
    }
    75% {
      transform: rotate(45deg) scale(0.9);
      bottom: -120px;
    }
    100% {
      transform: rotate(45deg) scale(1);
      bottom: -60px;
    }
  }

.loading-element::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #E6DB74;
    animation: fragment-disappearance 5s linear infinite;
  }

Recomendado

Contêiner de efeitos de luz HTML com CSS

Produção de aço, indústria metalúrgica | Iron and Steel Inc.

Animação de carregamento CSS: fluxo de memória e reflexão

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS