.loading-spinner__animation {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  position: relative;
  animation: loading-spinner-rotate 1s linear infinite;
}

.loading-spinner__animation::before {
  content: "";
  box-sizing: border-box;
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--hs-palette-primary-main);
  animation: loading-spinner-prix-clip 2s linear infinite;
}

@keyframes loading-spinner-rotate {
  100% { transform: rotate(360deg); }
}

@keyframes loading-spinner-prix-clip {
  0% { clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0); }
  25% { clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0); }
  50% { clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%); }
  75% { clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%); }
  100% { clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0); }
}