Animación de la barra de carga CSS

1,371 byby.createsite

Abrir en el editor Publica tu código

Recomendado

11 October 2025

Fragmento de animación de carga de CSS

22 July 2025

Página de inicio del Samsung Galaxy S24 Ultra

23 February 2024

Plantilla Gratuita de Página de Aterrizaje

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