/* HTML: <div class="loader"></div> */
.overlay {
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: none;
  align-items: center;
  justify-content: center;
  text-align: center;
  z-index: 99999999;
  /* pointer-events: none; Menyembunyikan interaksi pengguna dengan elemen di bawah overlay */
}

.loader {
    width: 100px;
    height: 40px;
    --g: radial-gradient(farthest-side,#0000 calc(95% - 3px),#fff calc(100% - 3px) 98%,#0000 101%) no-repeat;
    background: var(--g), var(--g), var(--g);
    background-size: 30px 30px;
    animation: l9 1s infinite alternate;
  }
  @keyframes l9 {
    0% {
      background-position: 0 50%, 50% 50%, 100% 50%;
    }
    20% {
      background-position: 0 0, 50% 50%, 100% 50%;
    }
    40% {
      background-position: 0 100%, 50% 0, 100% 50%;
    }
    60% {
      background-position: 0 50%, 50% 100%, 100% 0;
    }
    80% {
      background-position: 0 50%, 50% 50%, 100% 100%;
    }
    100% {
      background-position: 0 50%, 50% 50%, 100% 50%;
    }
  }