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) • 761 B
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}}