Ejemplo de elemento de carga animado CSS

Abrir en el editor Video Publica tu código

Recomendado

21 April 2025

Plantilla de juego HTML Canvas de Flappy Bird

HTML

```html
<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    /* css_foundation */
    * {
      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; }

.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;
      min-height: 100vh;
    }

.fractura {
      position: relative;
      width: 100%;
      height: 100%;
      z-index: 1;
    }

.fractura::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: #fff;
      transform: rotate(45deg);
      z-index: 2;
    }

.fractura::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: #fff;
      transform: rotate(-45deg);
      z-index: 3;
    }

.linha {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 50%;
      height: 50%;
      background: #fff;
      transform-origin: left;
      animation: animar-linha 2s linear infinite;
    }

.linha::before, .linha::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: #fff;
    }

.linha::before {
      transform: rotate(45deg);
    }

.linha::after {
      transform: rotate(-45deg);
      animation: animar-linha-after 2s linear infinite;
    }

.fragmento {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 50%;
      height: 50%;
      background: #fff;
      transform-origin: left;
      animation: animar-fragmento 2s linear infinite;
    }

.fragmento::before, .fragmento::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: #fff;
    }

.fragmento::before {
      transform: rotate(45deg);
      animation: animar-fragmento-before 2s linear infinite;
    }

.fragmento::after {
      transform: rotate(-45deg);
      animation: animar-fragmento-after 2s linear infinite;
    }

@keyframes animar-linha {
      0% {
        transform: translate(-50%, -50%) rotate(0deg);
      }
      100% {
        transform: translate(-50%, -50%) rotate(180deg);
      }
    }

@keyframes animar-linha-after {
      0% {
        transform: translate(-50%, -50%) rotate(-45deg);
      }
      100% {
        transform: translate(-50%, -50%) rotate(-225deg);
      }
    }

@keyframes animar-fragmento {
      0% {
        transform: translate(-50%, -50%) rotate(0deg);
      }
      100% {
        transform: translate(-50%, -50%) rotate(360deg);
      }
    }

@keyframes animar-fragmento-before {
      0% {
        transform: translate(-50%, -50%) rotate(45deg);
      }
      100% {
        transform: translate(-50%, -50%) rotate(405deg);
      }
    }

@keyframes animar-fragmento-after {
      0% {
        transform: translate(-50%, -50%) rotate(-45deg);
      }
      100% {
        transform: translate(-50%, -50%) rotate(-405deg);
      }
    }

/* Ação para a segunda exibição */
    .animation-container.second-iteration {
      transform: translateX(-50%) translateY(-50%) rotate(30deg);
    }

.linia-second-iteration {
      animation: animar-linha-second-iteration 2s linear infinite;
    }

@keyframes animar-linha-second-iteration {
      0% {
        transform: translate(-50%, -50%) rotate(0deg);
      }
      100% {
        transform: translate(-50%, -50%) rotate(360deg);
      }
    }

.fragment-second-iteration {
      animation: animar-fragment-second-iteration 2s linear infinite;
    }

@keyframes animar-fragment-second-iteration {
      0% {
        transform: translate(-50%, -50%) rotate(0deg);
      }
      100% {
        transform: translate(-50%, -50%) rotate(360deg);
      }
    }

/* Código Exemplo */
    .loading-element {
      border-radius: 50%;
      animation: loading-animation 1s linear infinite;
    }

@keyframes loading-animation {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }
  </style>
</head>
<body>

<div class="animation-container second-iteration">
    <div class="fractura">
      <div class="linha"></div>
      <div class="linha" style="animation-delay: 0.5s;"></div>
      <div class="linha"></div>
      <div class="fragmento"></div>
      <div class="fragmento" style="animation-delay: 1s;"></div>
      <div class="linha linia-second-iteration"></div>
      <div class="fragmento fragment-second-iteration"></div>
    </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;
}

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

Ejemplo de elemento de carga animado CSS

Recomendado

Un código de Metehan

Página de inicio de sesión

Plantilla de juego HTML Canvas de Flappy Bird

HTML

CSS

JS

Recomendado

Un código de Metehan

Página de inicio de sesión

Plantilla de juego HTML Canvas de Flappy Bird

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS