@property --p{syntax: "<integer>"; initial-value: 0; inherits: true;}.queue-spinner-overlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background-color:#000c;z-index:9999}.loader{display:grid;position:absolute;top:45%;left:45%}.loader{--p: 0;place-self:center;transform:scale(.5);clip-path:circle(49%);animation:p 30s steps(100) infinite;color:HSL(calc(var(--p) * 2),100%,65%)}.loader:before,.loader:after{grid-row:1;grid-column:1}.loader:before{border:solid 2em transparent;padding:6em;border-radius:50%;box-shadow:inset 0 0 0 .5em currentcolor;--slice: calc(360deg/var(--n));--s-gap: calc(var(--f)*var(--slice));--solid: calc((1 - var(--f))*var(--slice));background:repeating-conic-gradient(from calc(.5 * var(--s-gap)),currentcolor 0% var(--solid),transparent 0% var(--slice)) border-box;filter:blur(.5px);mask:conic-gradient(red 0% calc(var(--p) * 1%),rgba(255,0,0,.3) 0%) intersect,linear-gradient(red,red) border-box subtract,radial-gradient(red 0% 5.5em,transparent calc(5.5em + 1px) calc(5.75em - 1px),red 5.75em calc(6em + 1px),transparent calc(6em + 2px));content:""}.loader:after{place-self:center;counter-reset:p var(--p);font:3.75em consolas,monaco,ubuntu mono,monospace;content:counter(p) "%"}@keyframes p{90%,to{--p: 100 }}