.loading{position:relative;width:1em;aspect-ratio:1;border-radius:.2em;font-size:0px;--duration: 1s;--num-dot: 10;--color-dot: white;--box-color: transparent;margin:auto}.loading:before{content:"";position:absolute;top:1px;left:1px;right:1px;bottom:1px;border-radius:.2em;background-color:var(--box-color)}.loading>div{position:absolute;width:100%;height:100%;top:0;left:0;transform:rotate(calc(360deg / var(--num-dot) * var(--index)))}.loading>div:before{position:absolute;content:"";top:.15em;left:.45em;width:.13em;height:.13em;transform:scale(0);border-radius:50%;background-color:var(--color-dot);animation:scaleTo1 var(--duration) calc(var(--duration) / var(--num-dot) * var(--index)) infinite linear reverse}@keyframes scaleTo1{0%{transform:scale(.3);opacity:.5}to{transform:scale(1.3)}}