Animazione della barra di caricamento CSS

Apri nell'Editor Pubblica il Tuo Codice

Consigliato

3 June 2025

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

Animazione della barra di caricamento CSS

Consigliato

Un codice di Metehan

Un codice di fastcloud893

Disposizione delle colonne

HTML

CSS

JS

Consigliato

Un codice di Metehan

Un codice di fastcloud893

Disposizione delle colonne

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS