enesdmc
➜ All Components

Loading Animation

Aug 1
·
2024

Next.js ve Tailwindcss kullanarak bir yüklenme animasyonu oluşturacağız. Bu animasyon, üç farklı renkte dairesel şekillerin dönmesinden oluşacaktır.

App klasörü altında page.tsx dosyasını oluşturun ve aşağıdaki kodları ekleyin.

app
page.tsx
layout.tsx
styles.css
.package.json
app/page.tsx
import React from "react" 
 
const Page = () => {
  return (
    <div className="flex items-center justify-center ">
      <div className="size-[120px] absolute rounded-full circle13 border-l-[5px] border-green-500" />
      <div className="size-[100px] absolute rounded-full circle2 border-r-[5px] border-rose-500" />
      <div className="size-[80px] absolute rounded-full circle13 border-b-[5px] border-purple-500" />
    </div>
  )
}
 
export default Page

Tailwindcss ile oluşturduğumuz sınıfların yanı sıra, animasyonları oluşturmak için styles.css dosyasını oluşturun ve aşağıdaki kodları ekleyin.

app/styles.css
@keyframes circle {
  0% {
    transform: rotate(360deg);
  }
}
 
@keyframes opposite {
  0% {
    transform: rotate(-360deg);
  }
}
 
 
.circle13 {
  animation: circle 1s linear infinite;
}
 
.circle2 {
  animation: opposite 1s linear infinite;
}