.dot{animation:dot-animation 2s ease-in-out infinite both;background:#817af9;border-radius:50%;height:4px;left:50%;position:absolute;top:50%;transform-origin:center;width:4px}@keyframes dot-animation{0%,to{height:8px;opacity:.6;transform:translate(-50%,-50%) translateX(0);width:8px}30%{height:8px;opacity:.9;width:8px}50%{height:4px;opacity:1;transform:translate(-50%,-50%) rotate(var(--angle)) translateX(8px) rotate(calc(var(--angle)*-1));width:4px}70%{height:8px;opacity:.8;width:8px}}.dot:first-child{--angle:0deg}.dot:nth-child(2){--angle:45deg}.dot:nth-child(3){--angle:90deg}.dot:nth-child(4){--angle:135deg}.dot:nth-child(5){--angle:180deg}.dot:nth-child(6){--angle:225deg}.dot:nth-child(7){--angle:270deg}.dot:nth-child(8){--angle:315deg}