Follow the Leader
A pure CSS orbital spinner where dots rotate around a centre point with staggered delays and fading opacity, creating a follow-the-leader trailing effect.
Generated using Grepped's AI UI component generator — created from scratch, not pulled from a library.
spinnerorbittraildotsloaderfade
Live Preview — customize or regenerate this in the workspace
Loading preview…
Design Intent
An orbiting dots spinner where each dot follows the previous one with a fading trail effect.
CSS
css
body { margin: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center; background: #0f0f0f; }
@keyframes follow-the-leader {
0% { transform: rotate(0deg) translateY(-200%); }
60%, 100%{ transform: rotate(360deg) translateY(-200%); }
}
.follow-the-leader-line {
height: 14px;
position: relative;
width: 14px;
}
.follow-the-leader-line div {
animation: follow-the-leader 1.25s infinite backwards;
background-color: #ffffff;
border-radius: 100%;
height: 100%;
width: 100%;
position: absolute;
}
.follow-the-leader-line div:nth-child(1) { animation-delay: 0.15s; opacity: 0.9; }
.follow-the-leader-line div:nth-child(2) { animation-delay: 0.30s; opacity: 0.8; }
.follow-the-leader-line div:nth-child(3) { animation-delay: 0.45s; opacity: 0.7; }
.follow-the-leader-line div:nth-child(4) { animation-delay: 0.60s; opacity: 0.6; }
.follow-the-leader-line div:nth-child(5) { animation-delay: 0.75s; opacity: 0.5; }HTML
html
<div class="follow-the-leader-line">
<div></div><div></div><div></div><div></div><div></div>
</div>Full Source
html
<!DOCTYPE html>
<html>
<head>
<style>
body { margin: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center; background: #0f0f0f; }
@keyframes follow-the-leader {
0% { transform: rotate(0deg) translateY(-200%); }
60%, 100%{ transform: rotate(360deg) translateY(-200%); }
}
.follow-the-leader-line {
height: 14px;
position: relative;
width: 14px;
}
.follow-the-leader-line div {
animation: follow-the-leader 1.25s infinite backwards;
background-color: #ffffff;
border-radius: 100%;
height: 100%;
width: 100%;
position: absolute;
}
.follow-the-leader-line div:nth-child(1) { animation-delay: 0.15s; opacity: 0.9; }
.follow-the-leader-line div:nth-child(2) { animation-delay: 0.30s; opacity: 0.8; }
.follow-the-leader-line div:nth-child(3) { animation-delay: 0.45s; opacity: 0.7; }
.follow-the-leader-line div:nth-child(4) { animation-delay: 0.60s; opacity: 0.6; }
.follow-the-leader-line div:nth-child(5) { animation-delay: 0.75s; opacity: 0.5; }
</style>
</head>
<body>
<div class="follow-the-leader-line">
<div></div><div></div><div></div><div></div><div></div>
</div>
</body>
</html>