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

Navigation Hover Effect Pure CSS

CSS Loading Animation Snippet

Turkish Login Form HTML

HTML

CSS

JS

Recommended

Navigation Hover Effect Pure CSS

CSS Loading Animation Snippet

Turkish Login Form HTML

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS