body {
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;      /* full height */
    background: #fff;   /* bebas */
}

.custom-loader {
    width: 100px;
    height: 100px;
    display: grid;
}

.custom-loader::before,
.custom-loader::after {    
    content:"";
    grid-area: 1/1;
    --c: radial-gradient(farthest-side,#766DF4 92%,#0000);
    background: 
      var(--c) 50%  0, 
      var(--c) 50%  100%, 
      var(--c) 100% 50%, 
      var(--c) 0    50%;
    background-size: 24px 24px;
    background-repeat: no-repeat;
    animation: s2 2s infinite;
}

.custom-loader::before {
  margin:8px;
  filter:hue-rotate(45deg);
  background-size: 16px 16px;
  animation-timing-function: linear;
}

@keyframes s2 { 
  100% { transform: rotate(.5turn) }
}