CSS Animated Loading Element Example

Open In Editor Publish Your Code

.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 Animated Loading Element Example

Recommended

CSS Animated Loading Screen with Dots

Turkish Login Page HTML Code Example

CSS Loading Animation Example

HTML

CSS

JS

Recommended

CSS Animated Loading Screen with Dots

Turkish Login Page HTML Code Example

CSS Loading Animation Example

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS