<!--
  Author: @codepeek
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<div class="comet-loader" role="status" aria-label="Loading">
  <span class="orbit orbit-one">
  </span>
  <span class="orbit orbit-two">
  </span>
  <span class="comet comet-a">
  </span>
  <span class="comet comet-b">
  </span>
  <span class="comet comet-c">
  </span>
  <span class="comet-core">
  </span>
</div>

/*
 * Author: @codepeek
 * License: MIT
 * Tags: #buttons #css #interface #opensource #codepeek
 */

.comet-loader{position:relative;width:132px;height:102px;margin:auto;display:grid;place-items:center;overflow:hidden;background:radial-gradient(circle,#16233f 0,#070911 62%);border-radius:16px}.orbit{position:absolute;width:88px;height:38px;border:1px solid rgba(126,167,255,.25);border-radius:50%;transform:rotate(-24deg)}.orbit-two{transform:rotate(42deg)}.comet{position:absolute;width:12px;height:12px;border-radius:50%;animation:comet-weave 1.6s linear infinite}.comet::after{content:"";position:absolute;right:8px;top:5px;width:30px;height:2px;background:linear-gradient(90deg,transparent,currentColor);transform:rotate(180deg);transform-origin:right}.comet-a{color:#70f5e5;background:#70f5e5;box-shadow:0 0 12px #70f5e5}.comet-b{color:#bd7dff;background:#bd7dff;box-shadow:0 0 12px #bd7dff;animation-delay:-.53s}.comet-c{color:#ffca70;background:#ffca70;box-shadow:0 0 12px #ffca70;animation-delay:-1.06s}.comet-core{width:12px;height:12px;border:1px solid #e3f4ff;border-radius:50%;box-shadow:0 0 12px #6d9dff}@keyframes comet-weave{0%{transform:translate(-44px,0) scale(.55);opacity:.2}25%{transform:translate(0,-30px) scale(1);opacity:1}50%{transform:translate(44px,0) scale(.55);opacity:.2}75%{transform:translate(0,30px) scale(1);opacity:1}100%{transform:translate(-44px,0) scale(.55);opacity:.2}}