Spinners/loading components

[matthewmngi]

Hi, everyone! I am building a project and realized a component that acted as a loader/spinner would be very convenient.
What I'm talking about is something similar to this one from Bootstrap:
https://getbootstrap.com/docs/5.0/components/spinners/

[Soviut]

Here's the spinner I use in my own loading component. I like it because it can be easily used inline.

<svg class="inline-block h-5 w-5 animate-spin" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
  <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
  <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>

[matthewmngi]

I've been using this one bc they haven't added one yet:

<Loader2 className="animate-spin" />

It's using the lucide-icons for the spinning svg

[akhilnchauhan]

Here's the spinner I use in my own loading component. I like it because it can be easily used inline.

<svg class="inline-block h-5 w-5 animate-spin" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
  <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
  <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>

Simple addition and look good - thank you!