@property --loaderAngle1{syntax:"<angle>";initial-value:0deg;inherits:false}@property --loaderAngle2{syntax:"<angle>";initial-value:0deg;inherits:false}@property --loaderAngle3{syntax:"<angle>";initial-value:0deg;inherits:false}@property --loaderAngle4{syntax:"<angle>";initial-value:0deg;inherits:false}@property --loaderAngle5{syntax:"<angle>";initial-value:0deg;inherits:false}@property --loaderAngle6{syntax:"<angle>";initial-value:0deg;inherits:false}@property --loaderAngle7{syntax:"<angle>";initial-value:0deg;inherits:false}@property --loaderAngle8{syntax:"<angle>";initial-value:0deg;inherits:false}@property --loaderAngle9{syntax:"<angle>";initial-value:0deg;inherits:false}.creating-spinner{--duration:2.5s;--delay:0.05s;font-size:160px;width:1em;height:1em;background:radial-gradient(circle at calc(cos(var(--loaderAngle1) - 90deg) * 30% + 50%) calc(sin(var(--loaderAngle1) - 90deg) * 30% + 50%),hsl(0 100% 50%/.6) 20%,transparent 0),radial-gradient(circle at calc(cos(var(--loaderAngle2) - 90deg) * 30% + 50%) calc(sin(var(--loaderAngle2) - 90deg) * 30% + 50%),hsl(40 100% 50%/.6) 20%,transparent 0),radial-gradient(circle at calc(cos(var(--loaderAngle3) - 90deg) * 30% + 50%) calc(sin(var(--loaderAngle3) - 90deg) * 30% + 50%),hsl(80 100% 50%/.6) 20%,transparent 0),radial-gradient(circle at calc(cos(var(--loaderAngle4) - 90deg) * 30% + 50%) calc(sin(var(--loaderAngle4) - 90deg) * 30% + 50%),hsl(120 100% 50%/.6) 20%,transparent 0),radial-gradient(circle at calc(cos(var(--loaderAngle5) - 90deg) * 30% + 50%) calc(sin(var(--loaderAngle5) - 90deg) * 30% + 50%),hsl(160 100% 50%/.6) 20%,transparent 0),radial-gradient(circle at calc(cos(var(--loaderAngle6) - 90deg) * 30% + 50%) calc(sin(var(--loaderAngle6) - 90deg) * 30% + 50%),hsl(200 100% 50%/.6) 20%,transparent 0),radial-gradient(circle at calc(cos(var(--loaderAngle7) - 90deg) * 30% + 50%) calc(sin(var(--loaderAngle7) - 90deg) * 30% + 50%),hsl(240 100% 50%/.6) 20%,transparent 0),radial-gradient(circle at calc(cos(var(--loaderAngle8) - 90deg) * 30% + 50%) calc(sin(var(--loaderAngle8) - 90deg) * 30% + 50%),hsl(280 100% 50%/.6) 20%,transparent 0),radial-gradient(circle at calc(cos(var(--loaderAngle9) - 90deg) * 30% + 50%) calc(sin(var(--loaderAngle9) - 90deg) * 30% + 50%),hsl(320 100% 50%/.6) 20%,transparent 0);background-blend-mode:screen;animation:loaderAngle1 var(--duration) calc(var(--delay) * -1) infinite,loaderAngle2 var(--duration) calc(var(--delay) * -2) infinite,loaderAngle3 var(--duration) calc(var(--delay) * -3) infinite,loaderAngle4 var(--duration) calc(var(--delay) * -4) infinite,loaderAngle5 var(--duration) calc(var(--delay) * -5) infinite,loaderAngle6 var(--duration) calc(var(--delay) * -6) infinite,loaderAngle7 var(--duration) calc(var(--delay) * -7) infinite,loaderAngle8 var(--duration) calc(var(--delay) * -8) infinite,loaderAngle9 var(--duration) calc(var(--delay) * -9) infinite}@keyframes loaderAngle1{75%,to{--loaderAngle1:360deg}}@keyframes loaderAngle2{75%,to{--loaderAngle2:360deg}}@keyframes loaderAngle3{75%,to{--loaderAngle3:360deg}}@keyframes loaderAngle4{75%,to{--loaderAngle4:360deg}}@keyframes loaderAngle5{75%,to{--loaderAngle5:360deg}}@keyframes loaderAngle6{75%,to{--loaderAngle6:360deg}}@keyframes loaderAngle7{75%,to{--loaderAngle7:360deg}}@keyframes loaderAngle8{75%,to{--loaderAngle8:360deg}}@keyframes loaderAngle9{75%,to{--loaderAngle9:360deg}}