Progress Fade Loader

A progress fade loader built with pure HTML and CSS that represents loading activity using smooth fade-in and fade-out transitions, providing subtle visual feedback without relying on JavaScript or external libraries.

Usage

This component is ideal for interfaces where soft, non-distracting loading feedback is preferred, such as background data loading, content placeholders, page transitions, or lightweight processing states.

Implementation

The fade animation is created using CSS keyframes, opacity control, and timing functions, allowing elements to fade sequentially while keeping the loader lightweight and easy to integrate.

HTML

<div class="loader-fade">
  <span></span><span></span><span></span>
</div>

<div class="loader-fade">
  <span></span><span></span><span></span>
</div>

CSS

.loader-fade {
  width: 200px;
  display: flex;
  justify-content: center;
  gap: 0.3rem;
}

.loader-fade span {
  width: 14px;
  height: 4px;
  border-radius: 999px;
  background: #94a3b8;
  animation: fade 1s infinite ease-in-out;
}

.loader-fade span:nth-child(2) {
  animation-delay: 0.15s;
}

.loader-fade span:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes fade {
  0% { opacity: 0.3; }
  50% { opacity: 1; }
  100% { opacity: 0.3; }
}

.loader-fade {
  width: 200px;
  display: flex;
  justify-content: center;
  gap: 0.3rem;
}

.loader-fade span {
  width: 14px;
  height: 4px;
  border-radius: 999px;
  background: #94a3b8;
  animation: fade 1s infinite ease-in-out;
}

.loader-fade span:nth-child(2) {
  animation-delay: 0.15s;
}

.loader-fade span:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes fade {
  0% { opacity: 0.3; }
  50% { opacity: 1; }
  100% { opacity: 0.3; }
}

Notes

• Built with pure HTML and CSS
• No JavaScript required
• Uses fade based loading animation
• Provides subtle progress feedback
• Lightweight and visually calm
• 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.