3

I wanted to include a loading spinner from tailwind-css and according to tailwindcss documentation, this should be available with the className="animate-spin".

I'm using React18 created from Vite. I've also installed daisyui in addition to tailwindcss.

When I apply "animate-spin" and inspect in the browser, I can see that it's been added when I select the spinner. It's definitely there and spinning in my button element, but for some reason, it just doesn't show up/is transparent.

Here is my code: `

<div className="bg-gray-50 px-4 py-3 text-right sm:px-6">
                                <button
                                    type="submit"
                                    className="inline-flex justify-center rounded-md border border-transparent bg-indigo-600 py-2 px-4 text-sm font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
                                >
                                    <svg className="animate-spin h-5 w-5 mr-3"></svg>
                                    Loading...
                                </button>
                            </div>

`

I've tried taking out "border-transparent" from the button className, but it still didn't show.

Appreciate any help from anybody who knows Tailwind. Both my App.css and index.css are blank aside from the tailwind imports and applying a universal font.

I've tried adjusting the color and background-color properties of the svg element with the spinner. So far only making the background-color white has made it shown up but only as a spinning squre.

I've tried adjusting text-white to the svg element but it doesn't show up and changing the color property doesn't make it show up.

disposable-kiwi
  • 55
  • 1
  • 4

2 Answers2

5

Your problem here is because your svg icon doesn't have any content inside it, not tailwindcss

You can change svg to div element and set background color to it, then animate-spin should working correctly

dtm
  • 191
  • 6
  • Hi, first of all, super grateful for your time looking at this. I've tried this:
    And it appears as a spinning square when it should appear like this: https://tailwindcss.com/docs/animation Do you have any experience getting this to work?     – disposable-kiwi Nov 01 '22 at 19:19
  • 1
    you can use some icon library like font awesome to get circle icon like in tailwind doc. Or you can extract svg icon directly with devtool https://stackoverflow.com/questions/43804171/how-to-extract-svg-as-file-from-web-page when you done get the icon, just put `animate-spin` class to that icon element – dtm Nov 02 '22 at 01:12
  • Thanks so much! I got it working with this. – disposable-kiwi Nov 03 '22 at 14:09
2

Your svg element has nothing in it. You would need to add a path for example.

If you want to have the exact same svg from tailwind website, check the code down below:

<button type="button" className="bg-indigo-500" disabled>
    <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>
</button>
Khaled Badran
  • 39
  • 4