Shimmer Bar Loader

A shimmer bar loader built with pure HTML and CSS that represents loading activity using a horizontal shimmer animation, giving users a clear sense of motion and progress without relying on JavaScript or external libraries.

Usage

This component is ideal for interfaces where continuous loading feedback is required, such as content placeholders, progress indicators, data fetching states, or background processing visuals.

Implementation

The shimmer effect is created using CSS gradients, background-position animation, and keyframes, allowing a light sweep to move across the bar while keeping the loader lightweight and easy to integrate.

HTML

<div class="loader-shimmer"></div>

<div class="loader-shimmer"></div>

CSS

.loader-shimmer {
  width: 200px;
  height: 14px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    #e5e7eb 25%,
    #f3f4f6 37%,
    #e5e7eb 63%
  );
  background-size: 400% 100%;
  animation: shimmer 1.4s ease infinite;
}

@keyframes shimmer {
  to { background-position: -400% 0; }
}

@media (prefers-color-scheme: dark) {
  .loader-shimmer {
    background: linear-gradient(
      90deg,
      #374151 25%,
      #4b5563 37%,
      #374151 63%
    );
  }
}

.loader-shimmer {
  width: 200px;
  height: 14px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    #e5e7eb 25%,
    #f3f4f6 37%,
    #e5e7eb 63%
  );
  background-size: 400% 100%;
  animation: shimmer 1.4s ease infinite;
}

@keyframes shimmer {
  to { background-position: -400% 0; }
}

@media (prefers-color-scheme: dark) {
  .loader-shimmer {
    background: linear-gradient(
      90deg,
      #374151 25%,
      #4b5563 37%,
      #374151 63%
    );
  }
}

Notes

• Built with pure HTML and CSS
• No JavaScript required
• Uses shimmer style loading animation
• Provides smooth, continuous motion feedback
• Lightweight and visually clear
• 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.