Animación de barra de carga CSS HTML

1,485 byby.createsite

Abrir en el editor Publica tu código

Recomendado

19 January 2024

Botón de Cambio de Tema

26 February 2024

Formulario de inicio de sesión HTML CSS

1 May 2026

Prueba de camuflaje de pendiente

HTML

CSS

* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

body {
      background-color: #111E36;
      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: 50%;
      max-width: 90%;
      width: 100%;
      overflow-y: auto;
      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;
    }

.loading-bar-container {
      width: 80%;
      height: 5px;
      background: linear-gradient(to right, #00bcd4 0%, #00bcd4 100%);
      border-radius: 10px;
    }

.loading-bar {
      height: 100%;
      background: #FFC107;
      width: 0%;
      animation: loadingBarSaturate 2s linear infinite;
    }

@keyframes loadingBarSaturate {
      0% {
        width: 0%;
      }
      50% {
        width: 100%;
      }
      100% {
        width: 0%;
      }
    }