.loader-container{position:fixed;inset:0;z-index:5000000;display:flex;align-items:center;justify-content:center;height:100%;width:100%;overflow:hidden;background-color:hsla(0,0%,100%,.5)}.loader{width:36px;height:36px;position:relative;background-color:rgba(0,0,0,0);--base-color:var(--light)}.loader:before{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:36px;height:36px;border-radius:50%;background-color:var(--primary);background-image:radial-gradient(circle 8px at 18px 18px,var(--base-color) 100%,transparent 0),radial-gradient(circle 4px at 18px 0,var(--base-color) 100%,transparent 0),radial-gradient(circle 4px at 0 18px,var(--base-color) 100%,transparent 0),radial-gradient(circle 4px at 36px 18px,var(--base-color) 100%,transparent 0),radial-gradient(circle 4px at 18px 36px,var(--base-color) 100%,transparent 0),radial-gradient(circle 4px at 30px 5px,var(--base-color) 100%,transparent 0),radial-gradient(circle 4px at 30px 5px,var(--base-color) 100%,transparent 0),radial-gradient(circle 4px at 30px 30px,var(--base-color) 100%,transparent 0),radial-gradient(circle 4px at 5px 30px,var(--base-color) 100%,transparent 0),radial-gradient(circle 4px at 5px 5px,var(--base-color) 100%,transparent 0);background-repeat:no-repeat;box-sizing:border-box;animation:rotationBack 3s linear infinite}@keyframes rotationBack{0%{transform:translate(-50%,-50%) rotate(0deg)}to{transform:translate(-50%,-50%) rotate(-1turn)}}