Soft orbit loader

<section role="status"><div class="orbits"><i></i><i></i><i></i><b></b></div><h1>A little magic in the making.</h1><p>GREAT THINGS TAKE A MOMENT</p><span class="dots">•••</span></section>

*{box-sizing:border-box}body{margin:0;min-height:100vh;display:grid;place-items:center;font-family:system-ui,sans-serif;background:#0b1020;color:#eaf0ff;padding:35px}button,input{font:inherit}button{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #63dbea;outline-offset:4px}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}body{background:radial-gradient(circle at center,#18223d,#090e1d 65%)}section{text-align:center}.orbits{position:relative;width:130px;height:130px;margin:0 auto 38px}.orbits i{position:absolute;inset:0;border:1px solid #6c87c72a;border-top-color:#80a7ff;border-radius:50%;animation:spin 3s linear infinite;transform:rotateX(50deg)}.orbits i:nth-child(2){inset:14px;border-color:#9f84d62a;border-right-color:#b09aef;animation-duration:4s;animation-direction:reverse}.orbits i:nth-child(3){inset:28px;border-color:#65d4e02a;border-bottom-color:#77dbeb;animation-duration:2.5s}.orbits b{position:absolute;inset:52px;background:#b4c7ff;border-radius:50%;box-shadow:0 0 35px #738bff80;animation:breathe 3s ease-in-out infinite}h1{font-size:18px;font-weight:400;letter-spacing:-.4px}p{font-size:7px;letter-spacing:3px;color:#657a9e}.dots{font-size:15px;letter-spacing:7px;color:#7789c4}@keyframes spin{to{transform:rotate(360deg)}}@keyframes breathe{50%{opacity:.4;transform:scale(.8)}}