Pulse Bar Loader

A pulse bar loader built with pure HTML and CSS that represents loading activity using vertical bars that pulse in sequence, providing a clear and rhythmic visual indicator without relying on JavaScript or external libraries.

Usage

This component is ideal for interfaces where continuous loading or processing feedback is needed, such as background tasks, data fetching states, media loading, or lightweight progress indicators.

Implementation

The pulse animation is created using CSS keyframes, transform scaling, and timing offsets, allowing each bar to animate in a staggered pattern while keeping the loader lightweight and easy to integrate.

HTML

<div class="loader-bars" aria-label="Loading">
  <span></span><span></span><span></span>
</div>

<div class="loader-bars" aria-label="Loading">
  <span></span><span></span><span></span>
</div>

CSS

.loader-bars {
  display: flex;
  gap: 4px;
}

.loader-bars span {
  width: 6px;
  height: 20px;
  background: #6366f1;
  border-radius: 4px;
  animation: pulse 800ms ease-in-out infinite;
}

.loader-bars span:nth-child(2) {
  animation-delay: 120ms;
}
.loader-bars span:nth-child(3) {
  animation-delay: 240ms;
}

@keyframes pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

@media (prefers-color-scheme: dark) {
  .loader-bars span {
    background: #a5b4fc;
  }
}

.loader-bars {
  display: flex;
  gap: 4px;
}

.loader-bars span {
  width: 6px;
  height: 20px;
  background: #6366f1;
  border-radius: 4px;
  animation: pulse 800ms ease-in-out infinite;
}

.loader-bars span:nth-child(2) {
  animation-delay: 120ms;
}
.loader-bars span:nth-child(3) {
  animation-delay: 240ms;
}

@keyframes pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

@media (prefers-color-scheme: dark) {
  .loader-bars span {
    background: #a5b4fc;
  }
}

Notes

• Built with pure HTML and CSS
• No JavaScript required
• Uses bar based pulse animation
• Clearly communicates loading activity
• Smooth, rhythmic motion
• Works in modern browsers

Preview styles shown. Production customization recommended.

Browse More UI Components

Explore hundreds of reusable HTML & CSS UI components built for modern web projects.
Discover buttons, cards, loaders, animations, layouts, and more all with live previews and clean, copy-paste code.