.container{--uib-size:20px;--uib-color:#000;--uib-speed:1s;--uib-dot-size:calc(var(--uib-size) * 0.24);position:relative;display:flex;align-items:center;justify-content:space-between;height:var(--uib-dot-size);width:var(--uib-size)}.container:after,.container:before,.dot{content:"";display:block;height:var(--uib-dot-size);width:var(--uib-dot-size);border-radius:50%;background-color:var(--uib-color);transform:scale(0);transition:background-color .3s ease}.container:before{animation:pulse var(--uib-speed) ease-in-out calc(var(--uib-speed) * -.375) infinite}.dot{animation:pulse var(--uib-speed) ease-in-out calc(var(--uib-speed) * -.25) infinite both}.container:after{animation:pulse var(--uib-speed) ease-in-out calc(var(--uib-speed) * -.125) infinite}@keyframes pulse{0%,to{transform:scale(0)}50%{transform:scale(1)}}