.item{background:transparent;display:grid;place-items:center;border-radius:4px}.container{--block-size:18vmin;display:grid;grid-template-columns:repeat(3,var(--block-size));grid-template-rows:repeat(3,var(--block-size));grid-gap:1vmin}.loader{--light-color:rgba(41,41,41,.727);--dot-size:15px;--dot-size-half:calc(var(--dot-size) / 2);--dot-size-half-neg:calc(var(--dot-size-half) * -1);width:var(--loader-size);display:grid;place-items:center;color:#000}.loader:after,.loader:before{content:"";position:absolute}.loader{--loader-size:var(--custom-loader-size,6vmin);--anim-duration:0.8s;aspect-ratio:1/1;border:1px dashed var(--light-color);border-radius:50%;perspective:50vmin;transform-style:preserve-3d;transform:rotateX(45deg) rotateY(15deg)}.loader:after,.loader:before{animation:loader var(--anim-duration) infinite}.loader:before{--z-dist:8vmin;width:var(--dot-size);background:currentColor;top:calc(50% - var(--dot-size-half));left:calc(50% - var(--dot-size-half));animation-delay:calc(var(--anim-duration) / 4 * -1)}.loader:after,.loader:before{aspect-ratio:1/1;border-radius:50%}.loader:after{--z-dist:4vmin;width:65%;border:2px solid}@keyframes loader{0%,to{transform:translateZ(calc(var(--z-dist) * -1)) scale(.3)}55%{transform:translateZ(var(--z-dist))}}