80 lines
2.6 KiB
TypeScript
80 lines
2.6 KiB
TypeScript
import React from "react";
|
||
|
||
const Preloader: React.FC = () => {
|
||
return (
|
||
// bg-bg ve text-fg bizim CSS'te tanımladığımız değişkenleri kullanır.
|
||
// Standart Tailwind sınıflarını (flex, min-h-screen) düzen için kullanıyoruz.
|
||
<div className="flex flex-col items-center justify-center min-h-screen text-fg font-sans transition-colors duration-300">
|
||
<div className="text-center max-w-[20em] w-full">
|
||
|
||
{/* SVG Konteyner */}
|
||
<svg
|
||
className="block mx-auto mb-6 w-32 h-32"
|
||
role="img"
|
||
aria-label="Shopping cart line animation"
|
||
viewBox="0 0 128 128"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
>
|
||
<g
|
||
fill="none"
|
||
strokeLinecap="round"
|
||
strokeLinejoin="round"
|
||
strokeWidth="8"
|
||
>
|
||
{/* Track (Arka plan izleri) */}
|
||
<g className="stroke-track">
|
||
<polyline points="4,4 21,4 26,22 124,22 112,64 35,64 39,80 106,80" />
|
||
<circle cx="43" cy="111" r="13" />
|
||
<circle cx="102" cy="111" r="13" />
|
||
</g>
|
||
|
||
{/* Hareketli Çizgiler */}
|
||
{/* animate-cartLines sınıfı globals.css'ten geliyor */}
|
||
<g className="stroke-primary animate-cartLines">
|
||
<polyline
|
||
className="animate-cartTop"
|
||
points="4,4 21,4 26,22 124,22 112,64 35,64 39,80 106,80"
|
||
strokeDasharray="338 338"
|
||
strokeDashoffset="-338"
|
||
/>
|
||
|
||
<g className="animate-cartWheel1">
|
||
<circle
|
||
className="animate-cartWheelStroke"
|
||
cx="43"
|
||
cy="111"
|
||
r="13"
|
||
strokeDasharray="81.68 81.68"
|
||
strokeDashoffset="81.68"
|
||
/>
|
||
</g>
|
||
|
||
<g className="animate-cartWheel2">
|
||
<circle
|
||
className="animate-cartWheelStroke"
|
||
cx="102"
|
||
cy="111"
|
||
r="13"
|
||
strokeDasharray="81.68 81.68"
|
||
strokeDashoffset="81.68"
|
||
/>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</svg>
|
||
|
||
{/* Yükleniyor Yazıları */}
|
||
<div className="relative h-6">
|
||
<p className="absolute w-full animate-msg text-lg">
|
||
Bringing you the goods…
|
||
</p>
|
||
<p className="absolute w-full opacity-0 invisible animate-msgLast text-lg">
|
||
This is taking long. Something’s wrong.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default Preloader; |