Loader Collection

<div class="ld"><figure><div class="sp"></div><figcaption>Spinner</figcaption></figure><figure><div class="dt"><i></i><i></i><i></i></div><figcaption>Dots</figcaption></figure><figure><div class="br"><i></i><i></i><i></i><i></i></div><figcaption>Bars</figcaption></figure><figure><div class="dm"></div><figcaption>Dot Matrix</figcaption></figure><figure><div class="dh"></div><figcaption>Dither</figcaption></figure><figure><div class="mo"></div><figcaption>Morph</figcaption></figure><figure><div class="cm"></div><figcaption>Comet</figcaption></figure><figure><div class="mb"><i></i><i></i></div><figcaption>Metaballs</figcaption></figure><figure><div class="nw"><i></i><i></i><i></i><i></i><i></i></div><figcaption>Newton</figcaption></figure><figure><div class="hx"></div><figcaption>Helix</figcaption></figure><figure><div class="sc mono">LOADING</div><figcaption>Scramble</figcaption></figure><figure><div class="pc"><b>0%</b><u><s></s></u></div><figcaption>Percent</figcaption></figure><figure><div class="as mono" data-f="⠋⠙⠹⠸⠼⠴⠦⠧⠇⠏"></div><figcaption>ASCII</figcaption></figure><figure><div class="as mono" data-f="|/-\\"></div><figcaption>ASCII Line</figcaption></figure><figure><div class="as mono" data-f="⣾⣽⣻⢿⡿⣟⣯⣷"></div><figcaption>ASCII Braille</figcaption></figure><figure><div class="as mono" data-f="▖▘▝▗"></div><figcaption>ASCII Blocks</figcaption></figure><figure><div class="as mono" data-f="⠁⠂⠄⠂"></div><figcaption>ASCII Bounce</figcaption></figure></div>

.ld{width:560px;display:grid;grid-template-columns:repeat(6,1fr);gap:24px 8px;font-family:system-ui,-apple-system,sans-serif;color:#f1f1f1}.ld figure{margin:0;display:grid;justify-items:center;align-content:start;gap:10px;height:76px}.ld figcaption{font-size:10.5px;color:#7d7d7d;text-align:center}.ld figure>div{height:36px;display:flex;align-items:center;justify-content:center}.mono{font-family:ui-monospace,Menlo,monospace}.sp{width:34px;height:34px;border-radius:50%;border:3px solid #2e2e2e;border-top-color:#fff;animation:l-r .9s linear infinite}@keyframes l-r{to{transform:rotate(360deg)}}.dt{gap:5px}.dt i{width:7px;height:7px;border-radius:50%;background:#bbb;animation:l-d 1s ease-in-out infinite}.dt i:nth-child(2){animation-delay:.15s}.dt i:nth-child(3){animation-delay:.3s}@keyframes l-d{0%,100%{transform:translateY(0);opacity:.4}50%{transform:translateY(-8px);opacity:1}}.br{gap:4px;align-items:flex-end!important}.br i{width:5px;background:#fff;border-radius:2px;animation:l-b 1s ease-in-out infinite}.br i:nth-child(2){animation-delay:.12s}.br i:nth-child(3){animation-delay:.24s}.br i:nth-child(4){animation-delay:.36s}@keyframes l-b{0%,100%{height:8px}50%{height:32px}}.dm{display:grid!important;grid-template-columns:repeat(3,8px);gap:4px}.dm i{width:8px;height:8px;border-radius:50%;background:#fff;animation:l-m 1.2s ease-in-out infinite}@keyframes l-m{0%,100%{opacity:.2;transform:scale(.7)}50%{opacity:1;transform:scale(1.1)}}.dh{display:grid!important;grid-template-columns:repeat(4,8px);gap:2px}.dh i{width:8px;height:8px;background:#fff}.mo{width:30px;height:30px;background:#fff;animation:l-mo 3s ease-in-out infinite}@keyframes l-mo{0%,100%{clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);transform:rotate(0)}33%{clip-path:polygon(50% 0,50% 0,100% 100%,100% 100%,0 100%,0 100%);transform:rotate(120deg)}66%{clip-path:polygon(0 0,50% 0,100% 0,100% 100%,50% 100%,0 100%);transform:rotate(240deg)}}.cm{width:30px;height:30px;border-radius:50%;background:conic-gradient(from 0deg,transparent 0 60%,#fff);-webkit-mask:radial-gradient(circle,transparent 9px,#000 10px);mask:radial-gradient(circle,transparent 9px,#000 10px);animation:l-r 1s linear infinite}.mb{width:50px;height:28px;background:#000;filter:contrast(22) blur(.4px);position:relative;border-radius:8px;overflow:hidden}.mb i{position:absolute;top:50%;width:14px;height:14px;margin-top:-7px;border-radius:50%;background:#fff;filter:blur(3px);animation:l-mb 1.6s ease-in-out infinite alternate}.mb i:first-child{left:6px}.mb i:last-child{right:6px;animation-direction:alternate-reverse}@keyframes l-mb{to{transform:translateX(10px)}}.nw{gap:0}.nw i{width:9px;height:9px;border-radius:50%;background:#fff}.nw i:first-child{animation:l-n1 1s ease-in-out infinite}.nw i:last-child{animation:l-n2 1s ease-in-out infinite}@keyframes l-n1{0%,50%,100%{transform:translateX(0)}25%{transform:translateX(-15px)}}@keyframes l-n2{0%,50%,100%{transform:translateX(0)}75%{transform:translateX(15px)}}.hx{position:relative;width:34px}.hx i{position:absolute;width:4px;height:4px;border-radius:50%;background:#fff}.sc{font-size:12px;letter-spacing:.18em;font-weight:700;width:90px}.pc{flex-direction:column;gap:4px;width:60px}.pc b{font-size:11px;font-family:ui-monospace,Menlo,monospace}.pc u{display:block;width:100%;height:3px;border-radius:2px;background:#2e2e2e;text-decoration:none;overflow:hidden}.pc s{display:block;height:100%;width:0;background:#fff}.as{font-size:26px;color:#fff;line-height:1;height:36px}

(function(){var d=document.querySelector('.dm');for(var i=0;i<9;i++){var e=document.createElement('i');e.style.animationDelay=(i%3+Math.floor(i/3))*.12+'s';d.appendChild(e)}var h=document.querySelector('.dh');for(i=0;i<16;i++){h.appendChild(document.createElement('i'))}var hs=h.children;setInterval(function(){for(var k=0;k<16;k++){hs[k].style.opacity=Math.random()>.5?1:.15}},160);var x=document.querySelector('.hx');for(i=0;i<12;i++){var a=document.createElement('i');a.style.top=(i*3)+'px';x.appendChild(a);var b=document.createElement('i');b.style.top=(i*3)+'px';x.appendChild(b)}var hd=x.children,t0=0;(function f(){t0+=.05;for(var k=0;k<12;k++){var ph=t0+k*.5,s=Math.sin(ph),c=Math.cos(ph);hd[k*2].style.left=(15+s*13)+'px';hd[k*2].style.opacity=.4+.6*(c+1)/2;hd[k*2+1].style.left=(15-s*13)+'px';hd[k*2+1].style.opacity=.4+.6*(1-c)/2}requestAnimationFrame(f)})();var sc=document.querySelector('.sc'),W='LOADING',G='#%&@$*+=?!',p=0;setInterval(function(){p+=.35;if(p>W.length+3)p=0;var s='';for(var k=0;k<W.length;k++){s+=k<p?W[k]:G[Math.floor(Math.random()*G.length)]}sc.textContent=s},70);var pc=document.querySelector('.pc'),pb=pc.querySelector('b'),ps=pc.querySelector('s'),v=0;setInterval(function(){v=v>=100?0:v+1;pb.textContent=v+'%';ps.style.width=v+'%'},60);document.querySelectorAll('.as').forEach(function(e){var f=e.dataset.f.split(''),n=0;if(e.dataset.f.indexOf('|/-')===0){f=['|','/','-',String.fromCharCode(92)]}setInterval(function(){e.textContent=f[n++%f.length]},e.dataset.f==='⠁⠂⠄⠂'?160:90)})})();