애니메이션 Tailwind CSS 단순 로드

Talewind CSS에 로드 애니메이션을 표시하려고 했지만 샘플을 찾을 수 없습니다.
그래서 나는 간단하게 사용할 샘플 코드를 복사해서 붙일 수 있는 몇 가지를 고려해 보았다.품질은 높지 않지만 "Tailwind CSS에서 로드 중인 디스플레이를 먼저 표시하고 싶다"는 메시지가 나타나면 자유롭게 복사하여 사용하십시오.

파란을 일으키는 애니메이션

<div className="flex justify-center">
  <div className="animate-ping h-4 w-4 bg-blue-600 rounded-full"></div>
</div>

일정

React가 아닌 경우 className를 class(또는 CodePen의 코드를 복사)

로 바꾸십시오.

bg-blue-600부분을 좋아하는 색으로 바꿔주세요

h-4와 w-4를 원하는 크기

로 변경하십시오.

세 가지 나란히 버전.

<div className="flex justify-center">
  <div className="animate-ping h-2 w-2 bg-blue-600 rounded-full"></div>
  <div className="animate-ping h-2 w-2 bg-blue-600 rounded-full mx-4"></div>
  <div className="animate-ping h-2 w-2 bg-blue-600 rounded-full"></div>
</div>

일정

React가 아닌 경우 className를 class(또는 CodePen의 코드를 복사)

로 바꾸십시오.

bg-blue-600부분을 좋아하는 색으로 바꿔주세요

h-2와 w-2를 원하는 크기

로 변경하십시오.

가운데 <div>의mx-4를 맞추면 3개의 원의 간격을 변경할 수 있다

Spinner(드러머)

<div className="flex justify-center">
  <div className="animate-spin h-10 w-10 border-4 border-blue-500 rounded-full border-t-transparent"></div>
</div>

Tailwind CSS의 v3에 해당하는 쓰기 방법입니다.v2를 사용하는 경우 아래를 보십시오.
Tailwind CSS v2를 사용하는 경우
v3 이전 버전에서는 한 줄의 색깔border-t-transparent만 바꿀 수 없기 때문에 style={{ borderTopColor: "transparent" }}처럼 써야 합니다.

<div className="flex justify-center">
        <div
          className="animate-spin h-10 w-10 border-4 border-blue-500 rounded-full"
          style={{ borderTopColor: "transparent" }}
        ></div>
</div>

※ 리액트가 아닌 경우에는 style={}의 일부를 style="border-top-color: transparent"로 교체
안배하다

React가 아닌 경우 className를 class(또는 CodePen의 코드를 복사)

로 바꾸십시오.

bg-blue-500부분을 좋아하는 색으로 바꿔주세요

h-10와 w-10를 원하는 크기

로 변경하십시오.

Spinner의 2

하모니카 같은 느낌의 스핀너를 만들어 봤어요.

<div className="flex justify-center">
    <div className="animate-spin h-8 w-8 bg-blue-300 rounded-xl"></div>
</div>

일정

React가 아닌 경우 className를 class(또는 CodePen의 코드를 복사)

로 바꾸십시오.

bg-blue-300부분을 좋아하는 색으로 바꿔주세요

각환의 정도를 rounded-xl 섹션에서 변경하십시오

.