How can I make the animation-spin in center and overlay?

Question

What I'm trying to do using Tailwind CSS is when data is loading, I want to put an animation spin, but the animation -spin I want to be overlay, and in the center.

This is what I have done by far:

        <div className="flex justify-center">
        <svg
          className="animate-spin -inline-block w-8 h-8 border-4 rounded-full"
          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"
          ></path>
        </svg>
      </div>

By far, the circle is shown on the top center and it's not overlaying at all.

How can I solve this?

Answer 1

You can use animate-spin class.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" integrity="sha512-wnea99uKIC3TJF7v4eKk4Y+lMz2Mklv18+r4na2Gn1abDRPPOeef95xTzdwGD9e6zXJBteMIhZ1+68QC5byJZw==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<div class="flex justify-center items-center h-screen fixed top-0 left-0 right-0 bottom-0 w-full z-50 overflow-hidden bg-gray-700 opacity-75">
  <div class="spinner-border animate-spin inline-block w-8 h-8 rounded-full" role="status">
<span class="visually-hidden">
    <svg
      className="animate-spin -inline-block w-8 h-8 border-4 rounded-full"
      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>
  </div>
</div>