react18-loaders
Version:
A comprehensive library that unleashes the full potential of React 18 server components, providing customizable loading animation components alongside a fullscreen loader container. Designed to seamlessly integrate with React and Next.js.
2 lines (1 loc) • 1.68 kB
CSS
.dots1__loader{--c: #000;width:60px;aspect-ratio:4;background:radial-gradient(circle closest-side,var(--c) 90%,rgba(0,0,0,0)) 0/33.3333333333% 100% space;clip-path:inset(0 100% 0 0);animation:dots1__anim 1s steps(4) infinite}@keyframes dots1__anim{to{clip-path:inset(0 -34% 0 0)}}.dots2__loader{width:32px;aspect-ratio:1;--c: #000;--dot-radius: 20%;--_g: no-repeat radial-gradient(farthest-side, var(--c) 90%, #0000);background:var(--_g),var(--_g),var(--_g),var(--_g);background-size:calc(2 * var(--dot-radius)) calc(2 * var(--dot-radius));animation:dots2__anim 1s infinite}@keyframes dots2__anim{0%{background-position:0 0,100% 0,100% 100%,0 100%}40%,50%{background-position:100% 100%,100% 0,0 0,0 100%}90%,to{background-position:100% 100%,0 100%,0 0,100% 0}}.bars1__loader{width:45px;aspect-ratio:1;--c: #000;--b: no-repeat repeating-linear-gradient(90deg, var(--c) 0 calc(100% / 7), #0000 0 calc(200% / 7));background:var(--b),var(--b),var(--b),var(--b);background-size:140% 26%;animation:bars1__l27 .75s infinite linear}@keyframes bars1__l27{0%,20%{background-position:0 0%,100% 33.3333333333%,0 66.6666666667%,100% 100%}80%,to{background-position:100% 0%,0 33.3333333333%,100% 66.6666666667%,0 100%}}.bars2__loader{width:45px;aspect-ratio:1;--c: #000;--b: no-repeat linear-gradient(var(--c) 0 0);background:var(--b) 0% 50%,var(--b) 50% 50%,var(--b) 100% 50%;background-size:20% 100%;animation:bars2__l1 1s infinite linear}@keyframes bars2__l1{0%{background-size:20% 100%,20% 100%,20% 100%}33%{background-size:20% 10%,20% 100%,20% 100%}50%{background-size:20% 100%,20% 10%,20% 100%}66%{background-size:20% 100%,20% 100%,20% 10%}to{background-size:20% 100%,20% 100%,20% 100%}}