.vtmn-loader{
  inline-size:2rem;
  block-size:2rem;
  background-color:#c4000000;
  -webkit-mask-image:linear-gradient(transparent 50%, white 50%), linear-gradient(to right, transparent 50%, white 50%);
          mask-image:linear-gradient(transparent 50%, white 50%), linear-gradient(to right, transparent 50%, white 50%);
  position:relative;
  color:hsl(200, 100%, 36.9%);
  animation:rotate 6s infinite;
}

.vtmn-loader::before{
  content:'';
  position:absolute;
  inset:0;
  border:0.125rem solid transparent;
  border-top-color:currentcolor;
  border-radius:50%;
  background-color:transparent;
  animation:rotate-shrink 0.75s infinite linear alternate;
}

.vtmn-loader_size--small.vtmn-loader{
  inline-size:1rem;
  block-size:1rem;
}

.vtmn-loader_size--small.vtmn-loader::before{
  border-width:0.0625rem;
}

.vtmn-loader_size--medium.vtmn-loader{
  inline-size:2rem;
  block-size:2rem;
}

.vtmn-loader_size--medium.vtmn-loader::before{
  border-width:0.125rem;
}

.vtmn-loader_size--large.vtmn-loader{
  inline-size:4rem;
  block-size:4rem;
}

.vtmn-loader_size--large.vtmn-loader::before{
  border-width:0.25rem;
}

@keyframes rotate{
  0%{
    transform:rotate(0deg);
  }
  12.5%{
    transform:rotate(180deg);
    animation-timing-function:linear;
  }
  25%{
    transform:rotate(630deg);
  }
  37.5%{
    transform:rotate(810deg);
    animation-timing-function:linear;
  }
  50%{
    transform:rotate(1260deg);
  }
  62.5%{
    transform:rotate(1440deg);
    animation-timing-function:linear;
  }
  75%{
    transform:rotate(1890deg);
  }
  87.5%{
    transform:rotate(2070deg);
    animation-timing-function:linear;
  }
  100%{
    transform:rotate(2520deg);
  }
}

@keyframes rotate-shrink{
  0%{
    transform:rotate(-30deg);
  }
  29.4%{
    border-inline-start-color:transparent;
  }
  29.41%{
    border-inline-start-color:currentcolor;
  }
  64.7%{
    border-block-end-color:transparent;
  }
  64.71%{
    border-block-end-color:currentcolor;
  }
  100%{
    border-inline-start-color:currentcolor;
    border-block-end-color:currentcolor;
    transform:rotate(225deg);
  }
}