.loader{--color-one:#14b8a6;--color-two:#0d9488;--color-three:rgba(20,184,166,.5);--color-four:rgba(13,148,136,.5);--color-five:rgba(20,184,166,.25);--time-animation:2s;--size:1;transform:scale(var(--size));box-shadow:0 0 25px 0 var(--color-three),0 20px 50px 0 var(--color-four);animation:colorize calc(var(--time-animation)*3)ease-in-out infinite;border-radius:50%;position:relative}.loader:before{content:"";border-top:solid 1px var(--color-one);border-bottom:solid 1px var(--color-two);background:linear-gradient(180deg,var(--color-five),var(--color-four));width:100px;height:100px;box-shadow:inset 0 10px 10px 0 var(--color-three),inset 0 -10px 10px 0 var(--color-four);border-radius:50%;position:absolute;top:0;left:0}.loader .box{background:linear-gradient(180deg,var(--color-one)30%,var(--color-two)70%);width:100px;height:100px;-webkit-mask:url(#clipping);mask:url(#clipping)}.loader svg{position:absolute}.loader svg #clipping{filter:contrast(15);animation:roundness calc(var(--time-animation)/2)linear infinite}.loader svg #clipping polygon{filter:blur(7px)}.loader svg #clipping polygon:first-child{transform-origin:75% 25%;transform:rotate(90deg)}.loader svg #clipping polygon:nth-child(2){transform-origin:50%;animation:rotation var(--time-animation)linear infinite reverse}.loader svg #clipping polygon:nth-child(3){transform-origin:50% 60%;animation:rotation var(--time-animation)linear infinite;animation-delay:calc(var(--time-animation)/-3)}.loader svg #clipping polygon:nth-child(4){transform-origin:40% 40%;animation:rotation var(--time-animation)linear infinite reverse}.loader svg #clipping polygon:nth-child(5){transform-origin:40% 40%;animation:rotation var(--time-animation)linear infinite reverse;animation-delay:calc(var(--time-animation)/-2)}.loader svg #clipping polygon:nth-child(6){transform-origin:60% 40%;animation:rotation var(--time-animation)linear infinite}.loader svg #clipping polygon:nth-child(7){transform-origin:60% 40%;animation:rotation var(--time-animation)linear infinite;animation-delay:calc(var(--time-animation)/-1.5)}@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes roundness{0%{filter:contrast(15)}20%{filter:contrast(3)}40%{filter:contrast(3)}60%{filter:contrast(15)}to{filter:contrast(15)}}@keyframes colorize{0%{filter:hue-rotate()}20%{filter:hue-rotate(10deg)}40%{filter:hue-rotate(20deg)}60%{filter:hue-rotate(10deg)}80%{filter:hue-rotate(5deg)}to{filter:hue-rotate()}}