.g-spin {
  display: inline-block;
  backface-visibility: hidden;
  animation: g-spin 1s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .g-spin {
    animation: none;
  }
}
.g-spin__inner {
  box-sizing: border-box;
  height: 100%;
  width: 50%;
  margin-inline-start: 50%;
  border: 2px solid var(--g-color-line-brand);
  border-inline-start: none;
  border-start-end-radius: 25px;
  border-end-end-radius: 25px;
}
.g-spin_size_xs {
  width: 16px;
  height: 16px;
}
.g-spin_size_s {
  width: 24px;
  height: 24px;
}
.g-spin_size_m {
  width: 28px;
  height: 28px;
}
.g-spin_size_l {
  width: 32px;
  height: 32px;
}
.g-spin_size_xl {
  width: 36px;
  height: 36px;
}

@keyframes g-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}