.playground-loading-container{--uib-size:45px;--uib-color:#000;--uib-speed:1.75s;position:relative;height:var(--uib-size);width:var(--uib-size);animation:rotate calc(var(--uib-speed) * 4) linear infinite}.dark .playground-loading-container{--uib-color:#fff}@keyframes rotate{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.particle{position:absolute;top:0;left:0;display:flex;align-items:center;justify-content:center;height:100%;width:100%;&:first-child{--uib-delay:0;transform:rotate(8deg)}&:nth-child(2){--uib-delay:-0.4;transform:rotate(36deg)}&:nth-child(3){--uib-delay:-0.9;transform:rotate(72deg)}&:nth-child(4){--uib-delay:-0.5;transform:rotate(90deg)}&:nth-child(5){--uib-delay:-0.3;transform:rotate(144deg)}&:nth-child(6){--uib-delay:-0.2;transform:rotate(180deg)}&:nth-child(7){--uib-delay:-0.6;transform:rotate(216deg)}&:nth-child(8){--uib-delay:-0.7;transform:rotate(252deg)}&:nth-child(9){--uib-delay:-0.1;transform:rotate(300deg)}&:nth-child(10){--uib-delay:-0.8;transform:rotate(324deg)}&:nth-child(11){--uib-delay:-1.2;transform:rotate(335deg)}&:nth-child(12){--uib-delay:-0.5;transform:rotate(290deg)}&:nth-child(13){--uib-delay:-0.2;transform:rotate(240deg)}}.particle:before{content:"";position:absolute;height:17.5%;width:17.5%;border-radius:50%;background-color:var(--uib-color);flex-shrink:0;transition:background-color .3s ease;--uib-d:calc(var(--uib-delay) * var(--uib-speed));animation:orbit var(--uib-speed) linear var(--uib-d) 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}}