.machine-loader{--color-one:oklch(0.92 0.01 270);--color-two:oklch(0.55 0.02 270);--color-three:oklch(0.92 0.01 270/0.5);--color-four:oklch(0.55 0.02 270/0.5);--color-five:oklch(0.92 0.01 270/0.25);--time-animation:2s;position:relative;animation:ml-colorize calc(var(--time-animation) * 3) ease-in-out infinite}.machine-loader,.machine-loader:before{width:100px;height:100px;border-radius:50%}.machine-loader:before{content:"";position:absolute;top:0;left:0;border-top:1px solid var(--color-one);border-bottom:1px solid var(--color-two);background:linear-gradient(180deg,var(--color-five),var(--color-four));box-shadow:inset 0 10px 10px 0 var(--color-three),inset 0 -10px 10px 0 var(--color-four)}.machine-loader .ml-box{width:100px;height:100px;background:linear-gradient(180deg,var(--color-one) 30%,var(--color-two) 70%)}.machine-loader svg{position:absolute;width:100px;height:100px}.machine-loader svg .ml-clip{filter:contrast(15);animation:ml-roundness calc(var(--time-animation) / 2) linear infinite}.machine-loader svg .ml-clip polygon{filter:blur(7px)}.machine-loader svg .ml-clip polygon:first-child{transform-origin:75% 25%;transform:rotate(90deg)}.machine-loader svg .ml-clip polygon:nth-child(2){transform-origin:50% 50%;animation:ml-rotation var(--time-animation) linear infinite reverse}.machine-loader svg .ml-clip polygon:nth-child(3){transform-origin:50% 60%;animation:ml-rotation var(--time-animation) linear infinite;animation-delay:calc(var(--time-animation) / -3)}.machine-loader svg .ml-clip polygon:nth-child(4),.machine-loader svg .ml-clip polygon:nth-child(5){transform-origin:40% 40%;animation:ml-rotation var(--time-animation) linear infinite reverse}.machine-loader svg .ml-clip polygon:nth-child(5){animation-delay:calc(var(--time-animation) / -2)}.machine-loader svg .ml-clip polygon:nth-child(6),.machine-loader svg .ml-clip polygon:nth-child(7){transform-origin:60% 40%;animation:ml-rotation var(--time-animation) linear infinite}.machine-loader svg .ml-clip polygon:nth-child(7){animation-delay:calc(var(--time-animation) / -1.5)}@keyframes ml-rotation{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes ml-roundness{0%{filter:contrast(15)}20%{filter:contrast(3)}40%{filter:contrast(3)}60%{filter:contrast(15)}to{filter:contrast(15)}}@keyframes ml-colorize{0%{filter:hue-rotate(0deg)}to{filter:hue-rotate(0deg)}}