.container{--uib-size:40px;--uib-color:black;--uib-speed:1.3s;--uib-dot-size:25%;position:relative;display:inline-block;height:var(--uib-size);width:var(--uib-size);animation:spin var(--uib-speed) infinite linear}.dot{left:calc(50% - var(--uib-dot-size) / 2);height:100%;width:var(--uib-dot-size)}.dot,.dot:after{position:absolute}.dot:after{content:"";top:0;left:0;height:0;width:100%;padding-bottom:100%;background-color:var(--uib-color);border-radius:50%;transition:background-color .3s ease}.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(0deg)}to{transform:rotate(1turn)}}@keyframes wobble{0%,to{transform:translateY(0)}50%{transform:translateY(65%)}}