Spinner

A loading spinner component.

---

Usage

import { Spinner } from "@newfold/ui-component-library";

<Spinner />

---

Variants

The Spinner provides 3 variants: default, primary and white.

1. Default (default)

<Spinner />

2. Primary

Pass 'primary' to the variant prop to render the primary variant spinner.

<Spinner variant="primary" />

3. White

Pass 'white' to the variant prop to render the white variant spinner. The white variant is used in dark mode environments.

<Spinner variant="white" />

---

Sizes

The Spinner provides 3 sizes: 3 (small), 4 (medium) and 8 (large).

1. Size 3 (Small)

To render size 3 spinner pass '3' to the size prop.

<div className="nfd-flex nfd-items-center nfd-gap-3">
    <Spinner size="3" />
    <Spinner 
        size="3"
        variant="primary"
    />
    <div className="nfd-inline-block nfd-bg-[#2B2B2B] nfd-p-1.5 nfd-rounded">
        <Spinner
            size="3"
            variant="white" 
        />
    </div>
</div>

2. Size 4 (Medium)

Size 4 spinner is the default spinner size.

<div className="nfd-flex nfd-items-center nfd-gap-4">
    <Spinner />
    <Spinner variant="primary" />
    <div className="nfd-inline-block nfd-bg-[#2B2B2B] nfd-p-2 nfd-rounded">
        <Spinner variant="white" />
    </div>
</div>

3. Size 8 (Large)

To render size 8 spinner pass '8' to the size prop.

<div className="nfd-flex nfd-items-center nfd-gap-6">
    <Spinner size="8" />
    <Spinner 
        size="8"
        variant="primary"
    />
    <div className="nfd-inline-block nfd-bg-[#2B2B2B] nfd-p-2.5 nfd-rounded-md">
        <Spinner
            size="8"
            variant="white" 
        />
    </div>
</div>

---

Props

Attribute	Type	Description	Default
variant	default | primary | white |	The variant of the spinner.	default
size	3 | 4 | 8 |	The size of the spinner.	4
className	string |	-	-