Animation de la barre de chargement CSS

1,716 byby.createsite

Remixer Ouvrir dans l'éditeur Publiez votre code

Recommandé

20 June 2025

Formulaire de connexion HTML turc

10 August 2024

Code du formulaire de connexion HTML

7 September 2024

Modèle de boîte de discussion HTML

HTML

CSS

body {
  background-color: #F0F2F5;
  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%;
  width: 100%;
  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;
}

.bar {
  width: 6px;
  height: 100px;
  background-color: #0CFF0C; 
  display: flex; /* flex container for centering */
  align-items: center; /* verticle centering */
  justify-content: center; /* horizontal centering */
  position: relative;
  animation: loadingBar 2s infinite; /* Animate using the loadingBar animation */  
}

@keyframes loadingBar { 
  0% { 
    width: 6px;
    background-color: #0CFF0C;   
  } 
  50% { 
    width: 90%;
    background-color: #F07C0C; /* Color shift on progress */
  }  
  100% {
    width: 6px;
    background-color: #0CFF0C;  
  }
}