CSS Live Preview Available

Rainbow Loading Bar

Colorful rainbow loading bar with smooth animation

CSS3AnimationLoadingRainbowProgress

Code

.rainbow-loader {
  height: 8px;
  width: 100%;
  max-width: 400px;
  border-radius: 4px;
  background: linear-gradient(90deg, #ff0000, #ff9900, #33cc33, #3399ff, #cc33ff);
  background-size: 400% 100%;
  animation: rainbow 3s linear infinite;
}
@keyframes rainbow {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 100% 50%;
  }
}

HTML

<"attr-name"</span>>class</span>="tag"</span>>div</span> "attr-name"</span>>class</span>="rainbow-loader"</span>></"attr-name"</span>>class</span>="tag"</span>>div</span>>

Live Preview