Ring Loader

A ring loader built with pure HTML and CSS that represents loading activity using a rotating circular ring, providing a simple and clear visual indicator without relying on JavaScript or external libraries.

Usage

This component is ideal for interfaces where minimal, continuous loading feedback is needed, such as application startup screens, background processing states, content loading indicators, or progress placeholders.

Implementation

The ring animation is created using CSS borders, keyframes, and transform rotation, allowing the circular loader to spin smoothly while keeping the component lightweight and easy to integrate.

HTML

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

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

CSS

.ss-loader{
  width:48px;
  height:48px;
  border:4px solid #e5e7eb;
  border-top-color:#22c55e;
  border-radius:50%;
  animation:spin 1s linear infinite;
}

@keyframes spin{
  from{
    transform:rotate(0deg);
  }
  to{
    transform:rotate(360deg);
  }
}

.ss-loader{
  width:48px;
  height:48px;
  border:4px solid #e5e7eb;
  border-top-color:#22c55e;
  border-radius:50%;
  animation:spin 1s linear infinite;
}

@keyframes spin{
  from{
    transform:rotate(0deg);
  }
  to{
    transform:rotate(360deg);
  }
}

Notes

• Built with pure HTML and CSS
• No JavaScript required
• Uses circular ring loading animation
• Simple and visually clear indicator
• Lightweight and easy to customize
• 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.