Spinner

Overview

The Spinner component is a versatile loading indicator that comes with multiple variants and customization options. Built with Framer Motion, it provides smooth animations and various styles to indicate loading states in your application.

Preview

Preview

Code

import { Spinner } from './components/ui';

function SpinnerDemo() {
  return (
    <div className="flex items-center gap-8">
      <Spinner size={40} color="border-primary" />
      <Spinner size={40} variant="bars" color="bg-primary" />
      <Spinner size={40} variant="dots-bounce" color="bg-primary" />
    </div>
  );
}

Installation

npm

npx @mindfiredigital/ignix-ui add spinner

yarn

yarn @mindfiredigital/ignix-ui add spinner

pnpm

pnpm @mindfiredigital/ignix-ui add spinner

Usage

Import the component:

import { Spinner } from './components/ui';

Basic Usage

function BasicSpinner() {
  return <Spinner size={40} color="border-primary" />;
}

Variants

Preview

Code

<Spinner size={40} variant="default" color="border-primary" />

Customization

Custom Styling

You can customize the appearance using Tailwind CSS classes:

<Spinner
  className="my-4"
  size={50}
  color="border-primary"
  thickness={6}
/>