Spinner

Usage

import { Spinner } from '@acronis-platform/shadcn-uikit';

Basic

A default spinner.

View source

import { Spinner } from '@acronis-platform/shadcn-uikit/react';

export function SpinnerBasic() {
  return <Spinner />;
}

Sizes

Spinner in small, medium, large, and extra-large sizes.

Small

Medium

Large

Extra Large

View source

import { Spinner } from '@acronis-platform/shadcn-uikit/react';

export function SpinnerSizes() {
  return (
    <div className="flex items-center gap-8">
      <div className="flex flex-col items-center gap-2">
        <Spinner size="sm" />
        <span className="text-xs text-muted-foreground">Small</span>
      </div>
      <div className="flex flex-col items-center gap-2">
        <Spinner size="md" />
        <span className="text-xs text-muted-foreground">Medium</span>
      </div>
      <div className="flex flex-col items-center gap-2">
        <Spinner size="lg" />
        <span className="text-xs text-muted-foreground">Large</span>
      </div>
      <div className="flex flex-col items-center gap-2">
        <Spinner size="xl" />
        <span className="text-xs text-muted-foreground">Extra Large</span>
      </div>
    </div>
  );
}

With Text

Spinner paired with a loading message.

Loading data...

Please wait...

Loading content...

View source

import { Spinner } from '@acronis-platform/shadcn-uikit/react';

export function SpinnerWithText() {
  return (
    <div className="space-y-4">
      <div className="flex items-center gap-3">
        <Spinner size="sm" />
        <span className="text-sm text-muted-foreground">Loading data...</span>
      </div>
      <div className="flex items-center gap-3">
        <Spinner size="md" />
        <span className="text-sm text-muted-foreground">Please wait...</span>
      </div>
      <div className="flex items-center gap-3">
        <Spinner size="lg" />
        <span className="text-base text-muted-foreground">
          Loading content...
        </span>
      </div>
    </div>
  );
}

Button

Spinner inside a button to indicate a pending action.

View source

import * as React from 'react';
import { Spinner } from '@acronis-platform/shadcn-uikit/react';
import { Button } from '@acronis-platform/shadcn-uikit/react';

export function SpinnerButton() {
  const [loading, setLoading] = React.useState(false);

  const simulateLoading = () => {
    setLoading(true);
    setTimeout(() => setLoading(false), 3000);
  };

  return (
    <div className="flex gap-3">
      <Button onClick={simulateLoading} disabled={loading}>
        {loading ? (
          <>
            <Spinner size="sm" className="mr-2" />
            Loading...
          </>
        ) : (
          'Click to Load'
        )}
      </Button>
      <Button variant="outline" onClick={simulateLoading} disabled={loading}>
        {loading ? (
          <>
            <Spinner size="sm" className="mr-2" />
            Processing...
          </>
        ) : (
          'Process Data'
        )}
      </Button>
    </div>
  );
}

Centered

Spinner centered within a container.

Please wait while we fetch your data

View source

import { Spinner } from '@acronis-platform/shadcn-uikit/react';

export function SpinnerCentered() {
  return (
    <div className="flex flex-col items-center justify-center gap-4 rounded-lg border p-12">
      <Spinner size="lg" />
      <div className="text-center">
        <p className="text-sm font-medium text-muted-foreground">Loading...</p>
        <p className="text-xs text-muted-foreground/70 mt-1">
          Please wait while we fetch your data
        </p>
      </div>
    </div>
  );
}

Card

Spinner used as a loading state inside a card.

User Profile

View your profile information

Name

John Doe

john@example.com

View source

import * as React from 'react';
import {
  Spinner,
  Button,
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardContent,
} from '@acronis-platform/shadcn-uikit/react';

export function SpinnerCard() {
  const [dataLoading, setDataLoading] = React.useState(false);

  const simulateDataLoad = () => {
    setDataLoading(true);
    setTimeout(() => setDataLoading(false), 2000);
  };

  return (
    <Card className="w-full max-w-md">
      <CardHeader>
        <CardTitle>User Profile</CardTitle>
        <CardDescription>View your profile information</CardDescription>
      </CardHeader>
      <CardContent>
        {dataLoading ? (
          <div className="flex flex-col items-center justify-center py-8">
            <Spinner size="lg" />
            <p className="text-sm text-muted-foreground mt-4">
              Loading profile data...
            </p>
          </div>
        ) : (
          <div className="space-y-4">
            <div>
              <p className="text-sm font-medium">Name</p>
              <p className="text-sm text-muted-foreground">John Doe</p>
            </div>
            <div>
              <p className="text-sm font-medium">Email</p>
              <p className="text-sm text-muted-foreground">john@example.com</p>
            </div>
            <Button
              onClick={simulateDataLoad}
              variant="outline"
              className="w-full"
            >
              Reload Data
            </Button>
          </div>
        )}
      </CardContent>
    </Card>
  );
}

Inline

Spinner displayed inline with text content.

Fetching latest updates...

Your request is being processed

View source

import { Spinner } from '@acronis-platform/shadcn-uikit/react';

export function SpinnerInline() {
  return (
    <div className="space-y-3">
      <p className="text-sm">
        <Spinner size="sm" className="inline-block align-middle mr-2" />
        Fetching latest updates...
      </p>
      <p className="text-sm">
        Your request is being processed
        <Spinner size="sm" className="inline-block align-middle ml-2" />
      </p>
    </div>
  );
}

Overlay

Spinner shown as a full-area loading overlay.

Content Area

This is some content that will be covered by the loading overlay.

View source

import * as React from 'react';
import { Spinner, Button } from '@acronis-platform/shadcn-uikit/react';

export function SpinnerOverlay() {
  const [dataLoading, setDataLoading] = React.useState(false);

  return (
    <div className="relative rounded-lg border p-8">
      <div className="space-y-4">
        <h4 className="font-medium">Content Area</h4>
        <p className="text-sm text-muted-foreground">
          This is some content that will be covered by the loading overlay.
        </p>
        <Button onClick={() => setDataLoading(!dataLoading)}>
          {dataLoading ? 'Hide' : 'Show'} Loading Overlay
        </Button>
      </div>
      {dataLoading && (
        <div className="absolute inset-0 flex items-center justify-center bg-background/80 backdrop-blur-sm rounded-lg">
          <div className="flex flex-col items-center gap-3">
            <Spinner size="lg" />
            <p className="text-sm font-medium text-muted-foreground">
              Loading...
            </p>
          </div>
        </div>
      )}
    </div>
  );
}

Colors

Spinner with different color variants.

Blue

Green

Orange

Red

Purple

View source

import { Spinner } from '@acronis-platform/shadcn-uikit/react';

export function SpinnerColors() {
  return (
    <div className="flex items-center gap-8">
      <div className="flex flex-col items-center gap-2">
        <Spinner size="md" className="text-blue-500" />
        <span className="text-xs text-muted-foreground">Blue</span>
      </div>
      <div className="flex flex-col items-center gap-2">
        <Spinner size="md" className="text-green-500" />
        <span className="text-xs text-muted-foreground">Green</span>
      </div>
      <div className="flex flex-col items-center gap-2">
        <Spinner size="md" className="text-orange-500" />
        <span className="text-xs text-muted-foreground">Orange</span>
      </div>
      <div className="flex flex-col items-center gap-2">
        <Spinner size="md" className="text-red-500" />
        <span className="text-xs text-muted-foreground">Red</span>
      </div>
      <div className="flex flex-col items-center gap-2">
        <Spinner size="md" className="text-purple-500" />
        <span className="text-xs text-muted-foreground">Purple</span>
      </div>
    </div>
  );
}

API Reference

Spinner

Prop

Type

Edit on GitHub

Spinner

Content Area

On this page