Animation de la barre de chargement CSS HTML

1,486 byby.createsite

Ouvrir dans l'éditeur Publiez votre code

Animation de la barre de chargement CSS HTML

Recommandé

13 June 2025

Un code de Metehan

3 December 2024

Un code par securecode635

9 September 2024

Bouton de filtre SVG gluant

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