.container{--uib-size:40px;--uib-color:white;--uib-speed:1.8s;--uib-dot-size:calc(var(--uib-size) * .18);width:var(--uib-size);height:var(--uib-size);justify-content:space-between;align-items:center;display:flex;position:relative;top:15%;left:0}.dot{justify-content:flex-start;align-items:center;width:100%;height:100%;display:flex;position:absolute;top:0;left:0}.dot:before{content:"";height:calc(var(--uib-size) * .22);width:calc(var(--uib-size) * .22);background-color:var(--uib-color);border-radius:50%;transition:background-color .3s;display:block}.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:translate(0)rotate(0)}33.333%{transform:translate(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:translate(0)rotate(0)}}