<!--
  Author: @codepeek
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<div class="cipher-loader" role="status" aria-label="Loading">
  <span class="cipher-ring ring-a">
  </span>
  <span class="cipher-ring ring-b">
  </span>
  <span class="cipher-index">
  </span>
  <span class="cipher-core">
    +
  </span>
</div>

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

.cipher-loader{position:relative;width:112px;height:112px;margin:auto;display:grid;place-items:center;border-radius:50%;background:#080a0e;box-shadow:inset 0 0 22px #000}.cipher-ring{position:absolute;border-radius:50%;border:3px solid transparent;border-top-color:#55ead6;border-right-color:#55ead6;filter:drop-shadow(0 0 5px #55ead6);animation:cipher-spin 1.3s linear infinite}.ring-a{width:82px;height:82px}.ring-b{width:59px;height:59px;border-top-color:#9474ff;border-right-color:transparent;border-bottom-color:#9474ff;filter:drop-shadow(0 0 5px #9474ff);animation-direction:reverse;animation-duration:.9s}.cipher-index{position:absolute;top:11px;width:5px;height:14px;border-radius:5px;background:#f4ffb1;box-shadow:0 0 9px #f4ffb1;animation:index-pulse 1.3s ease-in-out infinite}.cipher-core{display:grid;place-items:center;width:25px;height:25px;border:1px solid #bbfff4;border-radius:50%;color:#bbfff4;font:700 18px/1 monospace;box-shadow:inset 0 0 10px #167e78,0 0 8px #167e78;animation:core-flash 1.3s ease-in-out infinite}@keyframes cipher-spin{to{transform:rotate(360deg)}}@keyframes index-pulse{0%,100%{opacity:.35;transform:scaleY(.7)}50%{opacity:1;transform:scaleY(1)}}@keyframes core-flash{0%,100%{transform:scale(.86);opacity:.55}50%{transform:scale(1.08);opacity:1}}