@property --value{syntax:"<angle>";inherits:true;initial-value:0deg}@property --width-ratio{syntax:"<number>";inherits:true;initial-value:0}@property --scale{syntax:"<number>";inherits:true;initial-value:0}:root{--width:8px;--duration:1.25s;--size:300px}@keyframes ring{0%{--value:var(--start);--scale:1;opacity:0}24%{opacity:1}50%{--scale:1.2;--width-ratio:1.5}76%{opacity:1}to{--scale:1;--value:calc(var(--start) + 90deg);--width-ratio:1}}@keyframes ring-legacy{0%{--value:var(--start);--scale:1;transform:rotateY(var(--value)) rotateX(var(--value)) rotate(var(--value)) scale(var(--scale))}70%{--scale:1.2;--value:calc(var(--start) + 180deg);transform:rotateY(var(--value)) rotateX(var(--value)) rotate(var(--value)) scale(var(--scale))}to{--value:calc(var(--start) + 360deg);--scale:1;transform:rotateY(var(--value)) rotateX(var(--value)) rotate(var(--value)) scale(var(--scale))}}.circle-animation{left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);transition:.3s;z-index:9}.circle-animation .demo{display:grid;height:300px;place-items:center;width:300px;z-index:9}.circle-animation .demo .rings{aspect-ratio:1;border-radius:50%;filter:url(#blurFilter);perspective:var(--size);position:relative;width:var(--size)}.circle-animation .demo .rings:after,.circle-animation .demo .rings:before{border-radius:50%;content:"";top:0;right:0;bottom:0;left:0;position:absolute;--width-ratio:1;border:calc(var(--width)*var(--width-ratio)) solid transparent;-webkit-mask:linear-gradient(#fff 0 0) padding-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) padding-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;--start:180deg;--value:var(--start);--scale:1;transform:rotateY(var(--value)) rotateX(var(--value)) rotate(var(--value)) scale(var(--scale));transition:.3s}.circle-animation .demo .rings:before{--start:180deg}.circle-animation .demo .rings:after{--start:90deg}.circle-animation .demo .rings>.rings:before{--start:360deg}.circle-animation .demo .rings>.rings:after{--start:270deg}.circle-animation .demo .rings:after,.circle-animation .demo .rings:before,.circle-animation .demo:hover .rings:after,.circle-animation .demo:hover .rings:before{animation:ring var(--duration) ease-in-out}.circle-animation.color_purple .rings:after,.circle-animation.color_purple .rings:before{background:conic-gradient(from calc(var(--value)*3),#d32ee6,transparent,#d32ee6,#d32ee6,#d32ee6,transparent,transparent,#d32ee6,transparent,#d32ee6,#d32ee6,#fff,transparent,transparent,transparent) border-box}.circle-animation.color_orange .rings:after,.circle-animation.color_orange .rings:before{background:conic-gradient(from calc(var(--value)*3),#ff553a,transparent,#ff553a,#ff553a,#ff553a,transparent,transparent,#ff553a,transparent,#ff553a,#ff553a,#fff,transparent,transparent,transparent) border-box}.circle-animation.color_blue .rings:after,.circle-animation.color_blue .rings:before{background:conic-gradient(from calc(var(--value)*3),#31bbff,transparent,#31bbff,#31bbff,#31bbff,transparent,transparent,#31bbff,transparent,#31bbff,#31bbff,#fff,transparent,transparent,transparent) border-box}.filter{display:block;height:0;overflow:visible!important;position:absolute;width:0}