.container{--uib-size:40px;--uib-color:#fff;--uib-speed:1.8s;--uib-dot-size:calc(var(--uib-size) * 0.18);position:relative;top:15%;justify-content:space-between;width:var(--uib-size);height:var(--uib-size)}.container,.dot{left:0;display:flex;align-items:center}.dot{position:absolute;top:0;justify-content:flex-start;width:100%;height:100%}.dot:before{content:"";display:block;height:calc(var(--uib-size) * .22);width:calc(var(--uib-size) * .22);border-radius:50%;background-color:var(--uib-color);transition:background-color .3s ease}.dot:first-child{animation:leapFrog var(--uib-speed) ease infinite}.dot:nth-child(2){transform:translateX(calc(var(--uib-size) * .4));animation:leapFrog var(--uib-speed) ease calc(var(--uib-speed) / -1.5) infinite}.dot:nth-child(3){transform:translateX(calc(var(--uib-size) * .8)) rotate(0deg);animation:leapFrog var(--uib-speed) ease calc(var(--uib-speed) / -3) infinite}@keyframes leapFrog{0%{transform:translateX(0) rotate(0deg)}33.333%{transform:translateX(0) rotate(180deg)}66.666%{transform:translateX(calc(var(--uib-size) * -.38)) rotate(180deg)}99.999%{transform:translateX(calc(var(--uib-size) * -.78)) rotate(180deg)}to{transform:translateX(0) rotate(0deg)}}