CSS एनिमेटेड लोडिंग एलिमेंट उदाहरण

अनुशंसित

15 September 2025

CSS फॉलिंग लोडिंग एनिमेशन स्निपेट

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

CSS एनिमेटेड लोडिंग एलिमेंट उदाहरण

अनुशंसित

CSS ग्रिड एनीमेशन उदाहरण

CSS फॉलिंग लोडिंग एनिमेशन स्निपेट

HTML बटन कोड उदाहरण

HTML

CSS

JS

अनुशंसित

CSS ग्रिड एनीमेशन उदाहरण

CSS फॉलिंग लोडिंग एनिमेशन स्निपेट

HTML बटन कोड उदाहरण

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS