.cube-container{--uib-size:35px;--uib-color:currentColor;--uib-speed:1.5s;width:var(--uib-size);height:calc(var(--uib-size) * .6);justify-content:space-between;align-items:flex-end;margin:0 auto;display:flex}.cube{width:calc(var(--uib-size) * .22);height:calc(var(--uib-size) * .22);animation:uib-jump var(--uib-speed) ease-in-out infinite;flex-shrink:0}.cube__inner{background-color:var(--uib-color);transform-origin:bottom;width:100%;height:100%;animation:uib-morph var(--uib-speed) ease-in-out infinite;border-radius:25%;transition:background-color .3s;display:block}.cube:nth-child(2),.cube:nth-child(2) .cube__inner{animation-delay:calc(var(--uib-speed) * -.36)}.cube:nth-child(3),.cube:nth-child(3) .cube__inner{animation-delay:calc(var(--uib-speed) * -.2)}@keyframes uib-jump{0%{transform:translateY(0)}30%{animation-timing-function:ease-out;transform:translateY(0)}50%{animation-timing-function:ease-in;transform:translateY(-150%)}75%{animation-timing-function:ease-in;transform:translateY(0)}}@keyframes uib-morph{0%{transform:scaleY(1)}10%{transform:scaleY(1)}20%,25%{animation-timing-function:ease-in-out;transform:scaleY(.6)scaleX(1.3)}30%{animation-timing-function:ease-in-out;transform:scaleY(1.15)scaleX(.9)}40%{transform:scaleY(1)}70%,85%,to{transform:scaleY(1)}75%{transform:scaleY(.8)scaleX(1.2)}}