Files
grateful-journal/src/components/PageLoader.tsx

27 lines
942 B
TypeScript

export function PageLoader({ transparent }: { transparent?: boolean }) {
return (
<div className={`page-loader${transparent ? ' page-loader--transparent' : ''}`} role="status" aria-label="Loading">
<svg
className="page-loader__tree"
viewBox="0 0 60 90"
width="72"
height="72"
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
>
{/* Trunk */}
<rect x="26" y="58" width="8" height="28" rx="4" fill="#A0722A" />
{/* Side canopy depth */}
<circle cx="14" cy="52" r="14" fill="#16a34a" />
<circle cx="46" cy="52" r="14" fill="#16a34a" />
{/* Main canopy */}
<circle cx="30" cy="37" r="22" fill="#22c55e" />
{/* Light highlight */}
<circle cx="20" cy="27" r="10" fill="#4ade80" opacity="0.6" />
{/* Top tip */}
<circle cx="30" cy="17" r="10" fill="#4ade80" />
</svg>
</div>
)
}