Webleb - UI Elements - CSS Loading Animation Snippet

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

CSS Loading Animation Snippet

Recommended

CSS Loading Animation HTML Structure

404 Page Not Found with CSS

Text Shadow Animation

HTML

CSS

JS

Recommended

CSS Loading Animation HTML Structure

404 Page Not Found with CSS

Text Shadow Animation

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS