Webleb - Snippets de Código - Trecho de animação de carregamento CSS

HTML

CSS

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

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

@keyframes loading-animation {
      0% {
        transform: translate(-50%, -50%) scale(1);
        border-radius: 50%;
      }
      50% {
        transform: translate(-50%, -50%) scale(1.2);
        border-radius: 25%;
      }
      100% {
        transform: translate(-50%, -50%) scale(1);
        border-radius: 50%;
      }
    }

.circle {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background-color: #66D9EF;
      animation: circle-animation 2s linear infinite;
    }

@keyframes circle-animation {
      0% {
        transform: translate(-50%, -50%) scale(1);
        border-radius: 50%;
      }
      50% {
        transform: translate(-50%, -50%) scale(1.2);
        border-radius: 25%;
      }
      100% {
        transform: translate(-50%, -50%) scale(1);
        border-radius: 50%;
      }
    }

.line {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) rotate(45deg);
      width: 100px;
      height: 2px;
      background-color: #66D9EF;
      animation: line-animation 2s linear infinite;
    }

@keyframes line-animation {
      0% {
        transform: translate(-50%, -50%) rotate(45deg);
        height: 2px;
      }
      50% {
        transform: translate(-50%, -50%) rotate(45deg);
        height: 4px;
      }
      100% {
        transform: translate(-50%, -50%) rotate(45deg);
        height: 2px;
      }
    }

.dot {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background-color: #66D9EF;
      animation: dot-animation 3s linear infinite;
    }

@keyframes dot-animation {
      0% {
        transform: translate(-50%, -50%) scale(1);
        background-color: #66D9EF;
      }
      50% {
        transform: translate(-50%, -50%) scale(1.2);
        background-color: #33CC33;
      }
      100% {
        transform: translate(-50%, -50%) scale(1);
        background-color: #66D9EF;
      }
    }

.reflection {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 100px;
      height: 100px;
      border-radius: 50%;
      background-color: #66D9EF;
      animation: reflection-animation 2s linear infinite;
      pointer-events: none;
    }

@keyframes reflection-animation {
      0% {
        transform: translate(-50%, -50%) scale(1);
        border-radius: 50%;
      }
      50% {
        transform: translate(-50%, -50%) scale(1.2);
        border-radius: 25%;
      }
      100% {
        transform: translate(-50%, -50%) scale(1);
        border-radius: 50%;
      }
    }

/* Animacão da sensação de reflexão */
    /* O "reflexo" é uma cópia do circulo de cima */
    /* Quando o circulo está se expandindo o reflexo se contrai e vice-versa */
    .reflexo {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background-color: #66D9EF;
      pointer-events: none;
      /* Comportamento que é a mesma do circulo de cima */
      animation: reflexo-animation 2s linear infinite;
    }

@keyframes reflexo-animation {
      0% {
        transform: translate(-50%, -50%) scale(1);
        border-radius: 50%;
      }
      50% {
        transform: translate(-50%, -50%) scale(1.2);
        border-radius: 25%;
      }
      100% {
        transform: translate(-50%, -50%) scale(1);
        border-radius: 50%;
      }
    }

/* Animacão que dá a sensação de sensibilidade ao toque */
    /* A animação faz com que o circulo de cima se move em direções opostas no inicio e meio da animacao */
    /* O circulo se expande e se contrai no inicio e meio da animação */
    .circulo {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background-color: #66D9EF;
      pointer-events: none;
      animation: animacao-circulo 2s linear infinite;
    }

@keyframes animacao-circulo {
      0% {
        transform: translate(-50%, -50%) scale(1);
        transform: translate(0, -10px);
      }
      50% {
        transform: translate(-50%, -50%) scale(0.5);
        transform: translate(10px, 0);
      }
      100% {
        transform: translate(-50%, -50%) scale(1);
        transform: translate(0, -10px);
      }
    }

/* Texto de apresentação */
    .presentacao {
      position: absolute;
      top: 10%;
      left: 50%;
      transform: translate(-50%);
      width: 100%;
      height: 20%;
      display: flex;
      justify-content: center;
      font-size: 24px;
      color: #66D9EF;
    }

Trecho de animação de carregamento CSS

Recomendado

Exemplo de código HTML para botão

Estrutura do contêiner de animação HTML

Relógio de contagem regressiva para Halloween

HTML

CSS

JS

Recomendado

Exemplo de código HTML para botão

Estrutura do contêiner de animação HTML

Relógio de contagem regressiva para Halloween

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS