@property --p{syntax:"<integer>";inherits:true;initial-value:0}.queue-spinner-overlay{z-index:9999;background-color:#000c;width:100%;height:100%;display:none;position:fixed;top:0;left:0}.loader{--p:0;clip-path:circle(49%);color:HSL(calc(var(--p) * 2), 100%, 65%);place-self:center;animation:30s steps(100,end) infinite p;display:grid;position:absolute;top:45%;left:45%;transform:scale(.5)}.loader:before,.loader:after{grid-area:1/1}.loader:before{--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);-webkit-mask:conic-gradient(red 0% calc(var(--p) * 1%), #ff00004d 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));mask:conic-gradient(red 0% calc(var(--p) * 1%), #ff00004d 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:"";border:2em solid #0000;border-radius:50%;padding:6em;box-shadow:inset 0 0 0 .5em}.loader:after{counter-reset:p var(--p);content:counter(p) "%";place-self:center;font:3.75em consolas,monaco,ubuntu mono,monospace}@keyframes p{90%,to{--p:100}}