.container{--uib-size:40px;--uib-color:black;--uib-speed:1.3s;--uib-dot-size:25%;height:var(--uib-size);width:var(--uib-size);animation:spin var(--uib-speed)infinite linear;display:inline-block;position:relative}.dot{left:calc(50% - var(--uib-dot-size)/2);height:100%;width:var(--uib-dot-size);position:absolute}.dot:after{content:"";background-color:var(--uib-color);border-radius:50%;width:100%;height:0%;padding-bottom:100%;transition:background-color .3s;position:absolute;top:0;left:0}.dot:first-child{transform:rotate(120deg)}.dot:first-child:after{animation:wobble var(--uib-speed)infinite ease-in-out}.dot:nth-child(2){transform:rotate(-120deg)}.dot:nth-child(2):after,.dot:nth-child(3):after{animation:wobble var(--uib-speed)infinite ease-in-out}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes wobble{0%,to{transform:translateY(0%)}50%{transform:translateY(65%)}}