Esempio di elemento di caricamento animato CSS

870 byby.createsite

Apri nell'Editor Video Pubblica il Tuo Codice

Esempio di elemento di caricamento animato CSS

Consigliato

25 August 2025

Struttura del contenitore di animazione HTML

5 September 2025

Modello HTML per chatbot AI | Codice interfaccia chat

23 March 2025

Portafoglio di denaro

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

Consigliato

Struttura del contenitore di animazione HTML

Modello HTML per chatbot AI | Codice interfaccia chat

Portafoglio di denaro

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS