Как я могу сделать анимацию-вращение в центре и наложение?

Что я пытаюсь сделать с помощью Tailwind CSS, так это то, что когда данные загружаются, я хочу добавить анимацию, но анимацию -spin я хочу наложить и по центру.

Это то, что я сделал на данный момент:

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

Безусловно, круг показан в центре вверху и вообще не перекрывается.

Как я могу это решить?

этот анимированный: i.stack.imgur.com/bbm68.gif

— 19.03.2022 15:39

Лучший ответ здесь: stackoverflow.com/questions/38018659/js-animation-spin-on-ho‌ver или здесь: google.com/search?q=animated+spin+javascript

— 19.03.2022 15:40

tailwind-css

19.03.2022 15:29

Ускоренная стилизация компонентов React Native с помощью NativeWind

Как сделать компонент справочного центра с помощью TailwindCSS

Справочный центр - это веб-сайт, где клиенты могут найти ответы на свои вопросы и решения своих проблем. Созданный для решения многих распространенных...

REACT и NEXT JS вместе с Tailwind CSS

Наличие собственного или персонального сайта необходимо в современном мире, а сочетание React и Next JS позволяет разработчику сделать это за меньшее...

Современные подходы к организации и работе с CSS в проекте

Любой, кто писал CSS в течение некоторого времени, знает о сложностях, которые с этим связаны, и о том, насколько это может быть болезненно.

Как использовать псевдокласс :hover в Tailwind только тогда, когда это действительно необходимо (при наличии курсора)

Я люблю Tailwind. Раньше я относился к нему с подозрением, но как только я попробовал его использовать, я был поражен тем, сколько времени он мне...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы можете использовать класс animate-spin.

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

19.03.2022 15:46

Другие вопросы по теме

Неизвестная ошибка слова из плагина CSS Minimizer в сборке React

TailwindCSS — как центрировать содержимое на элементе flex-grow

Отрицательный CSS-перевод Tailwind для элемента «до»

Как создать адаптивное меню, которое раскрывается в ВЕРХУ основного контента (Tailwind CSS...)

Как реализовать сетки Tailwind с горизонтальным интервалом без переноса на следующую строку?

Невозможно центрировать форму с помощью Tailwindcss

Пользовательский выбор компонента на Vue с SVG

`@apply` нельзя использовать с `.text-md`

Изменение наведения в Tailwindcss

Продолжительность перехода с попутным ветром css

Как я могу сделать анимацию-вращение в центре и наложение?

Ответы 1

Другие вопросы по теме

Похожие вопросы