Documentation

Loading Components

Elegant loading indicators and skeleton placeholders for content loading states.

LoadingDots

Simple, elegant bouncing dots animation. Perfect for minimal loading states.

import { LoadingDots } from 'archyra';

<LoadingDots size="md" />
<LoadingDots size="lg" color="#8B5CF6" />

PulseCircle

Pulsing circular animation with expanding rings. Great for attention-grabbing loaders.

import { PulseCircle } from 'archyra';

function MyComponent() {
  const [isActive, setIsActive] = useState(false);

  return (
    <PulseCircle
      isActive={isActive}
      onComplete={() => setIsActive(false)}
    />
  );
}

ProgressBar

Animated progress bar with gradient, striped, and glow variants. Includes circular progress.

import ProgressBar, { CircularProgress } from 'archyra';

<ProgressBar value={65} variant="gradient" showLabel />
<ProgressBar indeterminate />
<CircularProgress value={75} size={80} />

Skeleton

Flexible skeleton loader with multiple variants for text, avatar, card, and image placeholders.

import Skeleton, { SkeletonCard, SkeletonList } from 'archyra';

<Skeleton variant="text" lines={3} />
<Skeleton variant="avatar" size="lg" />
<SkeletonCard />
<SkeletonList count={5} />

Shimmer

Beautiful shimmer animation wrapper with preset components for various layouts.

import { ShimmerBlock, ShimmerText, ShimmerCard, ShimmerTable } from 'archyra';

<ShimmerBlock height={80} />
<ShimmerText lines={3} />
<ShimmerCard />
<ShimmerTable rows={5} cols={4} />