A dots loader animation built with pure HTML and CSS that represents loading activity using a sequence of animated dots, providing a clear and friendly visual indicator without relying on JavaScript or external libraries.
Usage
This component is ideal for interfaces where compact loading feedback is needed, such as inline loading states, button loaders, content placeholders, or small UI elements that require subtle progress indication.
Implementation
The dot animation is created using CSS keyframes, opacity changes, and transform scaling, allowing each dot to animate in sequence while keeping the loader lightweight and easy to integrate.
HTML
<div class="ss-loader">
<span></span><span></span><span></span>
</div>CSS
.ss-loader span{
display:inline-block;
width:8px;
height:8px;
margin:0 3px;
background:#2563eb;
border-radius:50%;
animation:bounce 1.2s infinite ease-in-out;
}
.ss-loader span:nth-child(2){ animation-delay:.2s; }
.ss-loader span:nth-child(3){ animation-delay:.4s; }
@keyframes bounce{
0%,80%,100%{ transform:scale(0); }
40%{ transform:scale(1); }
}Notes
- Built with pure HTML and CSS
- No JavaScript required
- Uses dot based loading animation
- Compact and visually friendly 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.