如何使动画旋转居中并叠加？

Question

我想使用 Tailwind CSS 做的是在加载数据时，我想放置一个动画旋转，但我想将动画-旋转叠加在中间。

这是我到目前为止所做的：

        <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>

到目前为止，圆圈显示在顶部中心并且根本没有重叠。

我该如何解决这个问题？

Answer 1

您可以使用 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>

如何使动画旋转居中并叠加？

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

tailwind-css