LoadingSpinner

A collection of fully animated loading spinner components with multiple variants (dots, circle, pulse, bounce, bars), customizable sizes, and colors.

Variants

Circle

Dots

Pulse

Bounce

Bars

Sizes

Small

Medium

Large

Colors

Installation

Install using our CLI tool (recommended):

Terminal

npx mixcn-ui add loadingspinner

Import

Component.tsx

import { LoadingSpinner } from "@components/customComponents/LoadingSpinner";

Props

Name	Type	Default	Description
variant	'dots' \| 'circle' \| 'pulse' \| 'bounce' \| 'bars'	circle	The variant/style of the loading spinner
size	'sm' \| 'md' \| 'lg'	md	The size of the spinner
color	string	currentColor	The color of the spinner (accepts CSS color values)
className	string	-	Additional CSS classes

Examples

All Variants

Variants

Circle

Dots

Pulse

Bounce

Bars

Sizes

Small

Medium

Large

Colors

All Variants.tsx

import LoadingSpinner from "@/components/uiComponents/LoadingSpinner";

export default function Example() {
  return (
    <div className="flex gap-8">
      <LoadingSpinner variant="circle" />
      <LoadingSpinner variant="dots" />
      <LoadingSpinner variant="pulse" />
      <LoadingSpinner variant="bounce" />
      <LoadingSpinner variant="bars" />
    </div>
  );
}

Different Sizes

Different Sizes.tsx

<div className="flex gap-8 items-center">
  <LoadingSpinner size="sm" />
  <LoadingSpinner size="md" />
  <LoadingSpinner size="lg" />
</div>

Custom Colors

Custom Colors.tsx

<div className="flex gap-8 items-center">
  <LoadingSpinner color="#3b82f6" />
  <LoadingSpinner color="#8b5cf6" />
  <LoadingSpinner color="#ec4899" />
</div>