Orbit Dot Loader

An orbit dot loader built with pure HTML and CSS that represents loading activity using dots rotating in a circular orbit, providing a smooth and modern visual indicator without relying on JavaScript or external libraries.

Usage

This component is ideal for interfaces where continuous activity feedback is needed, such as background processing, data loading states, application boot screens, or animated loading indicators.

Implementation

The orbit animation is created using CSS keyframes, transforms, and positioning, allowing dots to rotate around a center point while keeping the loader lightweight and easy to integrate.

HTML

<div class="loader-orbit" aria-label="Loading"></div>

<div class="loader-orbit" aria-label="Loading"></div>

CSS

.loader-orbit {
  width: 200px;
  height: 40px;
  display: grid;
  place-items: center;
}

.loader-orbit::before,
.loader-orbit::after {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #6366f1;
  position: absolute;
  animation: orbit 1.2s ease-in-out infinite;
}

.loader-orbit::after {
  animation-delay: 0.6s;
}

@keyframes orbit {
  0%   { transform: translateX(-20px); opacity: 0.4; }
  50%  { transform: translateX(20px);  opacity: 1; }
  100% { transform: translateX(-20px); opacity: 0.4; }
}

@media (prefers-color-scheme: dark) {
  .loader-orbit::before,
  .loader-orbit::after {
    background: #a5b4fc;
  }
}

.loader-orbit {
  width: 200px;
  height: 40px;
  display: grid;
  place-items: center;
}

.loader-orbit::before,
.loader-orbit::after {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #6366f1;
  position: absolute;
  animation: orbit 1.2s ease-in-out infinite;
}

.loader-orbit::after {
  animation-delay: 0.6s;
}

@keyframes orbit {
  0%   { transform: translateX(-20px); opacity: 0.4; }
  50%  { transform: translateX(20px);  opacity: 1; }
  100% { transform: translateX(-20px); opacity: 0.4; }
}

@media (prefers-color-scheme: dark) {
  .loader-orbit::before,
  .loader-orbit::after {
    background: #a5b4fc;
  }
}

Notes

• Built with pure HTML and CSS
• No JavaScript required
• Uses circular orbit style animation
• Clearly communicates loading activity
• Smooth, continuous motion
• 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.