xtreme-ui/dist/components/base/Spinner/spinner.css

Collection of reusable components that can be used in web projects

.xtrSpinner{--spinnerSize: 64px;--spinnerCubeSize: calc(var(--spinnerSize) / 2);--spinnerShadowSize: calc(var(--spinnerSize) / 20);--spinnerTopColor: 0 0% 20%;position:relative;width:var(--spinnerSize);height:var(--spinnerSize);display:flex;justify-content:center;align-items:center;flex-direction:column}.xtrSpinner.fullpage{width:100%;height:100%}.xtrSpinner .label{position:absolute;bottom:50%;font-variation-settings:"wdth" 75,"wght" 500;font-size:calc(8px + var(--spinnerSize) / 18);color:var(--colorContentPrimary);transform:translateY(calc(5px + var(--spinnerSize) / 1.6))}.xtrSpinner .spinnerWrapper{position:relative;width:var(--spinnerCubeSize);height:var(--spinnerCubeSize);margin-top:calc(var(--spinnerCubeSize) * -.1);transform-style:preserve-3d;animation:spinner .8s linear infinite}.xtrSpinner .spinnerWrapper .cubeTop{position:absolute;width:var(--spinnerCubeSize);height:var(--spinnerCubeSize);background:hsl(var(--spinnerTopColor));transform:rotateX(90deg) translateZ(calc(var(--spinnerCubeSize) / 2));transform-style:preserve-3d;transition:all var(--animDurFast) var(--cubicBezierPrimary)}.xtrSpinner .spinnerWrapper .cubeTop:before{content:"";position:absolute;width:var(--spinnerCubeSize);height:var(--spinnerCubeSize);background:hsl(var(--colorBrandPrimary)/80%);transform:translateZ(calc(-1 * var(--spinnerCubeSize) * 1.2));filter:blur(var(--spinnerShadowSize));box-shadow:0 0 var(--spinnerShadowSize) hsl(var(--spinnerTopColor)),0 0 calc(var(--spinnerShadowSize) * 2) hsl(var(--colorBrandPrimary)),0 0 calc(var(--spinnerShadowSize) * 3) hsl(var(--spinnerTopColor)),0 0 calc(var(--spinnerShadowSize) * 4) hsl(var(--colorBrandPrimary))}.xtrSpinner .spinnerWrapper .cubeWrapper{position:absolute;width:100%;height:100%;transform-style:preserve-3d}.xtrSpinner .spinnerWrapper .cubeWrapper .cubeFace{position:absolute;width:100%;height:100%;background:#fff;transition:all var(--animDurFast) var(--cubicBezierPrimary)}.xtrSpinner .spinnerWrapper .cubeWrapper .cubeFace:before{content:"";position:absolute;top:0;display:block;width:100%;height:100%;background:linear-gradient(to bottom,hsl(var(--colorBrandPrimary)/100%),hsl(var(--colorBrandPrimary)/40%))}.xtrSpinner .spinnerWrapper .cubeWrapper .cubeFace:after{content:"";position:absolute;top:0;display:block;width:100%;height:100%;background:linear-gradient(to bottom,hsl(var(--spinnerTopColor)/100%) 0%,hsl(var(--spinnerTopColor)/40%) 5%,hsl(var(--spinnerTopColor)/10%) 10%,transparent 100%)}.xtrSpinner .spinnerWrapper .cubeWrapper .cubeFace:nth-child(1){transform:rotateY(90deg) translateZ(calc(var(--spinnerCubeSize) / 2))}.xtrSpinner .spinnerWrapper .cubeWrapper .cubeFace:nth-child(2){transform:rotateY(180deg) translateZ(calc(var(--spinnerCubeSize) / 2))}.xtrSpinner .spinnerWrapper .cubeWrapper .cubeFace:nth-child(3){transform:rotateY(270deg) translateZ(calc(var(--spinnerCubeSize) / 2))}.xtrSpinner .spinnerWrapper .cubeWrapper .cubeFace:nth-child(4){transform:rotateY(360deg) translateZ(calc(var(--spinnerCubeSize) / 2))}@keyframes spinner{0%{transform:rotateX(-30deg) rotateY(0)}to{transform:rotateX(-30deg) rotateY(360deg)}}