/* HTML: <div class="loader"></div> */
.loader {
  width: 45px;
  aspect-ratio: 1;
  --c:no-repeat linear-gradient(#FF3C00 0 0);
  background: 
    var(--c) 0    0,
    var(--c) 0    100%, 
    var(--c) 50%  0,  
    var(--c) 50%  100%, 
    var(--c) 100% 0, 
    var(--c) 100% 100%;
  animation: l12 1s infinite;
}
@keyframes l12 {
 0%,100%{background-size:20% 50%}
 16.67% {background-size:20% 30%, 20% 30%, 20% 50%, 20% 50%, 20% 50%, 20% 50%}
 33.33% {background-size:20% 30%, 20% 30%, 20% 30%, 20% 30%, 20% 50%, 20% 50%}
 50%    {background-size:20% 30%, 20% 30%, 20% 30%, 20% 30%, 20% 30%, 20% 30%}
 66.67% {background-size:20% 50%, 20% 50%, 20% 30%, 20% 30%, 20% 30%, 20% 30%}
 83.33% {background-size:20% 50%, 20% 50%, 20% 50%, 20% 50%, 20% 30%, 20% 30%}
}

.circle-loader {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: $space-2;
      
  .ph, .ph-bold {
    font-size: 31px;
    transform-origin: 50% 50%;
    animation: icon_spin 1.2s linear infinite;
  }
}