Bar Loader

A bar loader built with pure HTML and CSS that represents loading activity using a horizontal bar animation, providing a clear and minimal visual indicator without relying on JavaScript or external libraries.

Usage

This component is ideal for interfaces where linear loading feedback is preferred, such as content loading states, file uploads, background processing, or simple progress indicators.

Implementation

The bar animation is created using CSS keyframes, width transitions, and background effects, allowing the loader to animate smoothly across a horizontal track while keeping the component lightweight and easy to integrate.

HTML

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

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

CSS

.ss-loader{
  width:120px;
  height:6px;
  background:#e5e7eb;
  position:relative;
  overflow:hidden;
  border-radius:4px;
}

.ss-loader::after{
  content:'';
  position:absolute;
  width:40px;
  height:100%;
  background:#2563eb;
  animation:slide 1s infinite;
}

@keyframes slide{
  0%{ left:-40px; }
  100%{ left:120px; }
}

.ss-loader{
  width:120px;
  height:6px;
  background:#e5e7eb;
  position:relative;
  overflow:hidden;
  border-radius:4px;
}

.ss-loader::after{
  content:'';
  position:absolute;
  width:40px;
  height:100%;
  background:#2563eb;
  animation:slide 1s infinite;
}

@keyframes slide{
  0%{ left:-40px; }
  100%{ left:120px; }
}

Notes

• Built with pure HTML and CSS
• No JavaScript required
• Uses horizontal bar loading animation
• Simple and easy-to-read progress cue
• Lightweight and customizable
• 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.