<!--
  Author: @codepeek
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<div class="horizon-loader" role="status" aria-label="Loading">
  <span class="horizon-arc arc-a">
  </span>
  <span class="horizon-arc arc-b">
  </span>
  <span class="horizon-sun">
  </span>
  <span class="horizon-line">
  </span>
</div>

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

.horizon-loader{position:relative;width:148px;height:94px;margin:auto;overflow:hidden;border-radius:14px;background:linear-gradient(#05060a 0 60%,#10182a 60%);box-shadow:inset 0 0 20px #000}.horizon-line{position:absolute;z-index:3;left:18px;right:18px;bottom:29px;height:1px;background:linear-gradient(90deg,transparent,#61eaff,transparent);box-shadow:0 0 8px #61eaff}.horizon-sun{position:absolute;z-index:2;left:60px;bottom:17px;width:28px;height:28px;border-radius:50%;background:radial-gradient(circle,#fff9b6 0 19%,#ffc462 28%,#ff7a5d 67%,transparent 69%);filter:drop-shadow(0 0 10px #ff775f);animation:sun-rise 1.65s cubic-bezier(.5,0,.5,1) infinite}.horizon-arc{position:absolute;z-index:1;left:50%;bottom:27px;width:20px;height:10px;border:1px solid #78f7e8;border-bottom:0;border-radius:30px 30px 0 0;transform:translateX(-50%);opacity:0;animation:beacon-wave 1.65s ease-out infinite}.arc-b{animation-delay:.55s}@keyframes sun-rise{0%,100%{transform:translateY(15px) scale(.72);opacity:.25}42%,62%{transform:translateY(-12px) scale(1);opacity:1}}@keyframes beacon-wave{0%,34%{width:20px;height:10px;opacity:0}42%{opacity:.85}75%{width:114px;height:55px;opacity:0}100%{opacity:0}}