<div [class]="sizeClasses()">
  <svg
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 56 56"
    fill="none"
    class="tw-size-full tw-animate-spin tw-flex"
    aria-hidden="true"
  >
    <circle cx="28" cy="28" r="23" [class]="variantClasses().background" stroke-width="5" />
    <circle
      cx="28"
      cy="28"
      r="23"
      [class]="variantClasses().foreground"
      pathLength="4"
      stroke-width="5"
      stroke-dasharray="1 3"
      stroke-linecap="round"
    />
  </svg>
  @if (title()) {
    <span class="tw-sr-only">{{ title() }}</span>
  }
</div>
