Webleb - UI Elements - CSS Loading Animation HTML Snippet

HTML

CSS

/* CSS Foundation */
    body {
      background-color: #272822;
      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%;
      min-width: 100%;
      width: 100%;
      overflow-y: hidden;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    }

.selector       { color: #F92672; }
    .property       { color: #66D9EF; }
    .value-number   { color: #AE81FF; }
    .value-string   { color: #E6DB74; }
    .value-color    { color: #A6E22E; }
    .brace          { color: #F8F8F2; }
    .comment        { color: #75715E; }
    .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;
    }

/* Animação: Phantom Loading */
    .animation-container {
      animation: spin 2s linear infinite;
    }
    @keyframes spin {
      0% {
        /* Comentário: A primeira iteração é uma representação da ansiedade, com elementos dispersos e sem sentido. */
        transform: translate(-50%, -50%) scale(1);
      }
      50% {
        /* Comentário: No meio da animação, os elementos começam a se organizar e formar uma falsa sensação de ordem. */
        transform: translate(-50%, -50%) scale(1.1);
      }
      100% {
        /* Comentário: Na última iteração, a ansiedade retorna e os elementos se dispersam novamente. */
        transform: translate(-50%, -50%) scale(0.9);
      }
    }

/* Elementos de Loading animados */
    .animation-container::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 100px;
      height: 100px;
      border-radius: 50%;
      border: 2px solid #F8F8F2;
      box-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
      animation: loading 2s ease-in-out infinite;
    }
    @keyframes loading {
      0% {
        transform: translate(-50%, -50%) scale(1);
        border-width: 2px;
      }
      50% {
        transform: translate(-50%, -50%) scale(1.2);
        border-width: 1px;
      }
      100% {
        transform: translate(-50%, -50%) scale(1);
        border-width: 2px;
      }
    }
    .animation-container::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background-color: #A6E22E;
      box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
      animation: pulse 2s ease-in-out infinite;
    }
    @keyframes pulse {
      0% {
        transform: translate(-50%, -50%) scale(1);
        transform-origin: center;
      }
      50% {
        transform: translate(-50%, -50%) scale(1.1);
        transform-origin: center;
      }
      100% {
        transform: translate(-50%, -50%) scale(1);
        transform-origin: center;
      }
    }

/* CSS para a barra de código */
    .codigo::before {
      content: '';
      font-size: 14px;
      color: #75715E;
    }

/* CSS para a barra de código que irá renderizar a animação */
    .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%;
      min-width: 100%;
      width: 100%;
      overflow-y: hidden;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    }

.selector       { color: #F92672; }
    .property       { color: #66D9EF; }
    .value-number   { color: #AE81FF; }
    .value-string   { color: #E6DB74; }
    .value-color    { color: #A6E22E; }
    .brace          { color: #F8F8F2; }
    .comment        { color: #75715E; }
    .function       { color: #A6E22E; }

.codigo {
      color: #F8F8F2;
    }
    .codigo .selector       { color: #F92672; }
    .codigo .property       { color: #66D9EF; }
    .codigo .value-number   { color: #AE81FF; }
    .codigo .value-string   { color: #E6DB74; }
    .codigo .value-color    { color: #A6E22E; }
    .codigo .brace          { color: #F8F8F2; }
    .codigo .comment        { color: #75715E; }
    .codigo .function       { color: #A6E22E; }

CSS Loading Animation HTML Snippet

Recommended

Office CSS Art

Restaurant Menu HTML Template

CSS Socials Card

HTML

CSS

JS

Recommended

Office CSS Art

Restaurant Menu HTML Template

CSS Socials Card

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS