Animation de la barre de chargement CSS HTML

1,402 byby.createsite

Ouvrir dans l'éditeur Publiez votre code

Animation de la barre de chargement CSS HTML

Recommandé

17 May 2024

Accueil animé et formulaire de connexion à l'inscription

29 September 2024

effet de révélation

20 May 2026

Chargeur HTML du jeu Ragdoll Archers

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