Spinner

Loading indicator with overlay support.

loadingfeedbackstatus

Import

import { Spinner } from "@/components/ui";

Basic Usage

Spinner Preview

Small

Medium

Large

Code

tsx

<Spinner />

Sizes

Available in multiple sizes

1<div className="flex items-center gap-4">
2  <Spinner size="xs" />
3  <Spinner size="sm" />
4  <Spinner size="md" />
5  <Spinner size="lg" />
6  <Spinner size="xl" />
7</div>

Colors

Different color options

1<div className="flex items-center gap-4">
2  <Spinner color="primary" />
3  <Spinner color="secondary" />
4  <div className="bg-primary p-2 rounded">
5    <Spinner color="white" />
6  </div>
7</div>

Full Page Loading

Centered loading indicator

1<div className="flex items-center justify-center min-h-[200px]">
2  <Spinner size="lg" />
3</div>

Ready to use this component?

Configure your app with the features you need and download production-ready code.

Start Configuring