Exemplo de elemento de carregamento animado em CSS

Abrir no Editor Publique Seu Código

Recomendado

12 December 2024

Controle deslizante de imagem para Blogspot CSS3

29 May 2025

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

Exemplo de elemento de carregamento animado em CSS

Recomendado

Controle deslizante de imagem para Blogspot CSS3

curiosidades (modelo)

Um código de Metehan

HTML

CSS

JS

Recomendado

Controle deslizante de imagem para Blogspot CSS3

curiosidades (modelo)

Um código de Metehan

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS