Loader Trio
Drie loaders: ring, bouncende dots, pulserende bars.
Zo gebruik je het
- Plak de HTML op de plek waar het onderdeel moet komen.
- Zet de CSS in je stylesheet. Alle klassen hebben een eigen voorvoegsel, dus niets botst met je eigen opmaak.
- Geen JavaScript nodig.
<!-- 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}}Meer uit componenten
Iets gezien dat je mooi vindt?
Zet het in je selectie en stuur hem op. Dan bouwen we je site eromheen, in jouw huisstijl.
Neem contact op →