Loader Trio
Three loaders: ring, bouncing dots, pulsing bars.
How to use it
- Paste the HTML where the components should appear.
- Add the CSS to your stylesheet. All classes are prefixed, so nothing clashes with your own styles.
- No JavaScript needed.
<!-- Loader Trio · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="ldt"><span class="ldt__ring"></span><span class="ldt__dots"><i></i><i></i><i></i></span><span class="ldt__bars"><i></i><i></i><i></i><i></i></span></div>
</div>/* Loader Trio · NedDev · eigen werk. */
.ldt{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:56px;background:#fff}
.ldt__ring{width:48px;height:48px;border-radius:50%;border:5px solid #0a0a0a1a;border-top-color:#F5480F;animation:ldtSpin .8s linear infinite}
@keyframes ldtSpin{to{transform:rotate(360deg)}}
.ldt__dots{display:flex;gap:9px;align-items:center}.ldt__dots i{width:13px;height:13px;border-radius:50%;background:#0a0a0a;animation:ldtBounce 1.1s ease-in-out infinite}
.ldt__dots i:nth-child(2){animation-delay:.16s;background:#F5480F}.ldt__dots i:nth-child(3){animation-delay:.32s}
@keyframes ldtBounce{0%,80%,100%{transform:translateY(0);opacity:.5}40%{transform:translateY(-16px);opacity:1}}
.ldt__bars{display:flex;gap:6px;align-items:flex-end;height:44px}.ldt__bars i{width:8px;height:14px;border-radius:4px;background:#F5480F;animation:ldtBars .9s ease-in-out infinite}
.ldt__bars i:nth-child(2){animation-delay:.12s}.ldt__bars i:nth-child(3){animation-delay:.24s}.ldt__bars i:nth-child(4){animation-delay:.36s}
@keyframes ldtBars{0%,100%{height:14px}50%{height:42px}}More components
Seen something you like?
Add it to your selection and send it over. We build your site around it, in your brand.
Get in touch →