.superballs{--uib-size:185px;--uib-speed:1.4s;--uib-color:orange;position:relative;height:var(--uib-size);width:var(--uib-size)}.superballs,.superballs__dot{display:flex;align-items:center;justify-content:center}.superballs__dot{position:absolute;top:0;left:0;height:100%;width:100%}.superballs__dot:before{content:"";height:30%;width:30%;border-radius:50%;background-color:var(--uib-color);will-change:transform;flex-shrink:0}.superballs__dot:first-child{transform:rotate(45deg)}.superballs__dot:first-child:before{animation:orbit var(--uib-speed) linear calc(var(--uib-speed) * -.143) infinite}.superballs__dot:nth-child(2){transform:rotate(-45deg)}.superballs__dot:nth-child(2):before{animation:orbit var(--uib-speed) linear calc(var(--uib-speed) / -2) infinite}@keyframes orbit{0%{transform:translate(calc(var(--uib-size) * .5)) scale(.73684);opacity:.65}5%{transform:translate(calc(var(--uib-size) * .4)) scale(.684208);opacity:.58}10%{transform:translate(calc(var(--uib-size) * .3)) scale(.631576);opacity:.51}15%{transform:translate(calc(var(--uib-size) * .2)) scale(.578944);opacity:.44}20%{transform:translate(calc(var(--uib-size) * .1)) scale(.526312);opacity:.37}25%{transform:translate(0) scale(.47368);opacity:.3}30%{transform:translate(calc(var(--uib-size) * -.1)) scale(.526312);opacity:.37}35%{transform:translate(calc(var(--uib-size) * -.2)) scale(.578944);opacity:.44}40%{transform:translate(calc(var(--uib-size) * -.3)) scale(.631576);opacity:.51}45%{transform:translate(calc(var(--uib-size) * -.4)) scale(.684208);opacity:.58}50%{transform:translate(calc(var(--uib-size) * -.5)) scale(.73684);opacity:.65}55%{transform:translate(calc(var(--uib-size) * -.4)) scale(.789472);opacity:.72}60%{transform:translate(calc(var(--uib-size) * -.3)) scale(.842104);opacity:.79}65%{transform:translate(calc(var(--uib-size) * -.2)) scale(.894736);opacity:.86}70%{transform:translate(calc(var(--uib-size) * -.1)) scale(.947368);opacity:.93}75%{transform:translate(0) scale(1);opacity:1}80%{transform:translate(calc(var(--uib-size) * .1)) scale(.947368);opacity:.93}85%{transform:translate(calc(var(--uib-size) * .2)) scale(.894736);opacity:.86}90%{transform:translate(calc(var(--uib-size) * .3)) scale(.842104);opacity:.79}95%{transform:translate(calc(var(--uib-size) * .4)) scale(.789472);opacity:.72}to{transform:translate(calc(var(--uib-size) * .5)) scale(.73684);opacity:.65}}.dot-spinner{--uib-size:140px;--uib-speed:.9s;--uib-color:orange;position:relative;height:var(--uib-size);width:var(--uib-size)}.dot-spinner,.dot-spinner__dot{display:flex;align-items:center;justify-content:flex-start}.dot-spinner__dot{position:absolute;top:0;left:0;height:100%;width:100%}.dot-spinner__dot:before{content:"";height:20%;width:20%;border-radius:50%;background-color:var(--uib-color);transform:scale(0);opacity:.5;animation:pulse calc(var(--uib-speed) * 1.111) ease-in-out infinite}.dot-spinner__dot:nth-child(2){transform:rotate(45deg)}.dot-spinner__dot:nth-child(2):before{animation-delay:calc(var(--uib-speed) * -.875)}.dot-spinner__dot:nth-child(3){transform:rotate(90deg)}.dot-spinner__dot:nth-child(3):before{animation-delay:calc(var(--uib-speed) * -.75)}.dot-spinner__dot:nth-child(4){transform:rotate(135deg)}.dot-spinner__dot:nth-child(4):before{animation-delay:calc(var(--uib-speed) * -.625)}.dot-spinner__dot:nth-child(5){transform:rotate(180deg)}.dot-spinner__dot:nth-child(5):before{animation-delay:calc(var(--uib-speed) * -.5)}.dot-spinner__dot:nth-child(6){transform:rotate(225deg)}.dot-spinner__dot:nth-child(6):before{animation-delay:calc(var(--uib-speed) * -.375)}.dot-spinner__dot:nth-child(7){transform:rotate(270deg)}.dot-spinner__dot:nth-child(7):before{animation-delay:calc(var(--uib-speed) * -.25)}.dot-spinner__dot:nth-child(8){transform:rotate(315deg)}.dot-spinner__dot:nth-child(8):before{animation-delay:calc(var(--uib-speed) * -.125)}@keyframes pulse{0%,to{transform:scale(0);opacity:.5}50%{transform:scale(1);opacity:1}}