A signal pulse loader built with pure HTML and CSS that represents loading activity using rhythmic pulse-style animation, providing a clear and modern visual indicator without relying on JavaScript or external libraries.
Usage
This component is ideal for interfaces where status or activity indication is needed, such as background processing states, network activity feedback, data fetching indicators, or lightweight loading animations.
Implementation
The pulse effect is created using CSS keyframes, scaling, and opacity transitions, allowing elements to animate in a repeating pulse pattern while keeping the loader lightweight and easy to integrate.
HTML
<div class="signal-loader" aria-label="Loading" role="status">
<span></span><span></span><span></span>
</div>CSS
.signal-loader {
width: 200px;
display: flex;
gap: 10px;
justify-content: center;
align-items: center;
}
.signal-loader span {
width: 10px;
height: 40px;
border-radius: 6px;
background: linear-gradient(180deg, #6ee7ff, #3b82f6);
animation: pulse 1.2s ease-in-out infinite;
opacity: 0.4;
}
.signal-loader span:nth-child(2) { animation-delay: .15s; }
.signal-loader span:nth-child(3) { animation-delay: .3s; }
@keyframes pulse {
0%, 100% { transform: scaleY(0.5); opacity: 0.4; }
50% { transform: scaleY(1); opacity: 1; }
}Notes
- Built with pure HTML and CSS
- No JavaScript required
- Uses pulse style loading animation
- Clearly communicates activity or progress
- Lightweight and visually distinct
- 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.