Design and implement a Loader (Spinner/Progress Indicator) component to be reused across different pages of the KnockOutZone web application. This loader should appear when data is being fetched from the backend or during any long-running computational task.

Requirements:

• Create a visually appealing, modern loader component (spinner, pulse, or progress bar).

• Style using Tailwind CSS with optional Glassmorphism effect if consistent with the theme.

• The loader should be:

  • Centrally aligned when shown full-screen
  • Customizable size for inline or page-wide usage
  • Reusable via props (e.g., size, variant, fullScreen)

• Should support both:

  • Full-page loader (overlay during route changes or initial load)
  • Inline loader (inside cards or sections while specific data is loading)

Tech Stack:

• React (Functional Components)
• Tailwind CSS
• Optional: Framer Motion for animation effects

Bonus Points:

• Add animation for entrance/exit using Framer Motion
• Support dark/light mode compatibility
• Include fallback text like “Loading…” for accessibility

Expected Outcome:

A Loader.jsx file that can be imported and used across different components/pages like:

{isLoading ? <Loader fullScreen /> : <Content />}

Helpful References:

• Spinner examples: https://tailwindcss.com/docs/animation#spin
• Glassmorphism inspiration: https://ui.glass/