Pulse Loader

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

Usage

This component is ideal for interfaces where simple activity feedback is needed, such as background processing, content loading states, form submissions, or lightweight progress indicators.

Implementation

The pulse effect is created using CSS keyframes, scaling, and opacity transitions, allowing elements to expand and fade in a repeating cycle while keeping the loader lightweight and easy to integrate.

HTML

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

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

CSS

.ss-loader{
  width:18px;
  height:18px;
  background:#2563eb;
  border-radius:50%;
  animation:pulse 1.2s infinite;
}

@keyframes pulse{
  0%{ transform:scale(1); opacity:1; }
  100%{ transform:scale(2); opacity:0; }
}

.ss-loader{
  width:18px;
  height:18px;
  background:#2563eb;
  border-radius:50%;
  animation:pulse 1.2s infinite;
}

@keyframes pulse{
  0%{ transform:scale(1); opacity:1; }
  100%{ transform:scale(2); opacity:0; }
}

Notes

• Built with pure HTML and CSS
• No JavaScript required
• Uses pulse style loading animation
• Clearly communicates activity or progress
• Lightweight and visually minimal
• 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.