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.
3 lines (2 loc) • 2.27 kB
CSS
.loader-container__container{position:fixed;top:0;left:0;width:100vw;height:100vh;display:flex;align-items:center;justify-content:center;z-index:1000;pointer-events:none;backdrop-filter:blur(1px);background:radial-gradient(circle,#535bf200 0% 150%,#8489f685,#535bf255);opacity:0;transition:all .5s}.loader-container__container *{animation-play-state:paused}.loader-container__loading{backdrop-filter:blur(3px);background:radial-gradient(circle,#535bf200 0% 0%,#8489f6b5 10%,#535bf255);pointer-events:all;opacity:1}.loader-container__loading *{animation-play-state:running}
.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%}}