body
{
  background-color: #eceff5;
}


.center 
{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.clock-loader 
{
    --clock-color: var(--primary-color, #FF2D55);
    --clock-width: 4rem;
    --clock-radius: calc(var(--clock-width) / 2);
    --clock-minute-length: calc(var(--clock-width) * 0.4);
    --clock-hour-length: calc(var(--clock-width) * 0.2);
    --clock-thickness: 0.2rem;

    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -50px;
    width: var(--clock-width);
    height: var(--clock-width);
    border: 3px solid var(--clock-color);
    border-radius: 50%;
  
    &::before,
    &::after 
    {
      position: absolute;
      content: "";
      top: calc(var(--clock-radius) * 0.25);
      width: var(--clock-thickness);
      background: var(--clock-color);
      border-radius: 10px;
      transform-origin: center calc(100% - calc(var(--clock-thickness) / 2));
      animation: spin infinite linear;
    }
  
    &::before 
    {
      height: var(--clock-minute-length);
      animation-duration: 2s;
    }
  
    &::after 
    {
      top: calc(var(--clock-radius) * 0.25 + var(--clock-hour-length));
      height: var(--clock-hour-length);
      animation-duration: 15s;
    }
  }
  
  @keyframes spin 
  {
    to {
      transform: rotate(1turn);
    }
  }