Trecho de animação de carregamento CSS

67 ByBy.inc

Abrir no Editor Publique Seu Código

Recomendado

29 July 2025

Contêiner de animação de objeto de imagem HTML

HTML

CSS

/* css_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;
    }

.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 rules */
    @keyframes loading {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }

.loading-element {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 50px;
      height: 50px;
      border-radius: 50%;
      animation: loading 2s linear infinite;
    }

.loading-element::before {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background-color: #f92672;
      animation: loading 1s linear infinite;
    }

.loading-element:nth-child(3) {
      animation-delay: 2s;
    }

.loading-element:nth-child(3)::before {
      animation-delay: 1s;
    }

/* animated layers */
    .layer-1 {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 100%;
      height: 50%;
      background-color: #66d9ef;
      z-index: 1;
    }

.layer-1::after {
      content: "";
      position: absolute;
      top: 100%;
      left: 0;
      width: 0%;
      height: 100%;
      background-color: #66d9ef;
      z-index: -1;
      animation: animate-layer 2s linear infinite;
    }

.layer-2 {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 100%;
      height: 50%;
      background-color: #a6e22e;
      z-index: 2;
    }

.layer-2::after {
      content: "";
      position: absolute;
      top: 100%;
      left: 0;
      width: 0%;
      height: 100%;
      background-color: #a6e22e;
      z-index: -2;
      animation: animate-layer 2s linear infinite;
      animation-delay: 1s;
    }

/* additional elements */
    .dot-1 {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) rotate(0deg);
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background-color: #f8f8f2;
    }

.dot-1::before {
      content: "";
      position: absolute;
      top: 50%;
      left: 0;
      transform: translate(-50%, -50%);
      width: 20px;
      height: 2px;
      background-color: #f8f8f2;
      animation: animate-dot 2s linear infinite;
    }

.dot-2 {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) rotate(0deg);
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background-color: #f8f8f2;
    }

.dot-2::before {
      content: "";
      position: absolute;
      top: 50%;
      left: 0;
      transform: translate(-50%, -50%);
      width: 20px;
      height: 2px;
      background-color: #f8f8f2;
      animation: animate-dot 2s linear infinite;
      animation-delay: 1s;
    }

/* animation functions */
    @keyframes animate-layer {
      0% {
        width: 0%;
      }
      100% {
        width: 100%;
      }
    }

@keyframes animate-dot {
      0% {
        transform: translate(-50%, -50%) rotate(0deg);
      }
      25% {
        transform: translate(-50%, -50%) rotate(45deg);
      }
      50% {
        transform: translate(-50%, -50%) rotate(0deg);
      }
      100% {
        transform: translate(-50%, -50%) rotate(0deg);
      }
    }

Trecho de animação de carregamento CSS

Recomendado

FORMULÁRIO DE LOGIN

Um código de Mete

Contêiner de animação de objeto de imagem HTML

HTML

CSS

JS

Recomendado

FORMULÁRIO DE LOGIN

Um código de Mete

Contêiner de animação de objeto de imagem HTML

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS