Add spinner icon

[brielov]

It would be nice to have a spinner icon to use with tailwind's animate-spin class name.

[dextermb]

Something along the lines of FontAwesome's spinner-third would be great!

[redbastie]

+1

[timReynolds]

I know it's annoying when people just add +1 comments but this would be a really good addition. I recently wanted an icon to use with animate-spin and ended up copying the svg from the tailwind website as one isn't included in heroicons.

[brielov]

@timReynolds Yeah I know, I did the same thing :/

[ZhengRui]

Nice, i am not the only one to copy the svg from the tailwind website :)

[mariusmarais]

Save the Googlers some time :)

Copied from https://tailwindcss.com/docs/animation#spin example

<svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-white" 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>

[abevoelker]

Reactified:

import React from 'react'

export default function Spinner(props) {
  const color = props.color || "text-white"
  return (
    <svg className={`animate-spin -ml-1 mr-3 h-5 w-5 ${color} ${props.extraClasses}`} xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
      <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
      <path className="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>
  )
}

Usage:

<Spinner color="text-black" extraClasses="self-center" />

// or just:

<Spinner />

[dextermb]

I've recently been using:

<svg class="spinner" viewBox="0 0 50 50">
    <circle class="path" cx="25" cy="25" r="20" fill="none" stroke="currentColor" stroke-width="5" />
</svg>

.spinner {
  animation: rotate 2s linear infinite;
  z-index: 2;
  width: 100%;
  height: 100%;

  & .path {
    stroke-linecap: round;
    animation: dash 1.5s ease-in-out infinite;
  }
}

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

@keyframes dash {
  0% {
    stroke-dasharray: 1, 150;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -35;
  }
  100% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -124;
  }
}

[henrikruscon]

Here's a fixed version of the official Tailwind spinner, scales much better because you can set the stroke width on this one.

<svg
	xmlns="http://www.w3.org/2000/svg"
	class="h-5 w-5 flex-1 animate-spin stroke-current stroke-[3]"
	fill="none"
	viewBox="0 0 24 24"
>
	<path
		d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"
		class="stroke-current opacity-25"
	/>
	<path d="M12 2C6.47715 2 2 6.47715 2 12C2 14.7255 3.09032 17.1962 4.85857 19" />
</svg>

[dvlden]

I made myself this one, with same size that Heroicons is using. It has no full-circle as background, only has 1/4th of the circle for the spinner. Uses much smaller path and looks cleaner. You can set stroke-width on it as well and you can optionally remove stroke-linecap so it's sharp and not rounded.

Screen.Recording.2023-01-14.at.00.06.30.mov

<svg 
    class="animate-spin text-indigo-500"
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 24 24"
>
    <path
        d="m1,12C1,5.92,5.92,1,12,1"
        fill="none"
        stroke="currentColor"
        stroke-miterlimit="10"
        stroke-width="2"
        stroke-linecap="round"
    />
</svg>

[dessalines]

What's the reason this isn't added as a heroicon yet? Its such a simple svg, yet used universally. Every icon pack that I can think of has a spinner except for this.

[jobjen02]

Why isn't this included yet?

[natemate90]

Copying an SVG defeats the point of using an icon library. A spinner / loader icon is a pretty common use case and therefore should be included.

[QuentinMerabet]

Still not resolved? Back to Lucide then.

[jeannen]

Any plan to add it? Had to copy a SVG online...

[simonRNF]

Was surprised it was not added yet.
Had to add a SVG to my otherwise SVG free code

[vischalla]

Adding myself to the list for folks who would like this

[hxxtae]

I am using this library in the "dashboard" tutorial made in next.js, but there is no spinner icon.

[iamvinny]

I've created a component for a loading spinning icon with optional text parameter, feel free to use and modify as you like. It works great inside of buttons or as lazy-skeleton :)

export function LoadingIcon({text}: any) {

    return (
        <div className="flex items-center">
            <svg className="animate-spin -ml-1 mr-2 h-5 w-5 text-black dark:text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
                <path className="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>
            <span className="text-black dark:text-white">{text}</span>
        </div>
    )

}

[ndri]

I added arc-third to Sidekickicons, which are meant to be used as a companion to Heroicons. Browse them here: https://sidekickicons.andri.io/