Skip to main content

Spinner

The Spinner component indicates a loading state using an animated spinning indicator. It's useful for providing feedback during asynchronous operations.

Import​

import { Spinner } from '@lazy-panda-ui/lazy-panda-ui';

Usage​

import React from 'react';
import { Spinner } from '@lazy-panda-ui/lazy-panda-ui';

function MyComponent() {
  return (
    <Spinner size="md" color="primary" />
  );
}

Props​

NameTypeDefaultDescription
size'xs' | 'sm' | 'md' | 'lg' | 'xl''md'Size of the spinner
color'primary' | 'secondary' | 'success' | 'warning' | 'error''primary'Color scheme
variant'border' | 'dots' | 'grow''border'Visual variant
speed'slow' | 'normal' | 'fast''normal'Animation speed
thicknessnumber2Border thickness
labelstring-Accessibility label

Examples​

Basic Spinners​

<Stack direction="row" spacing="md">
  <Spinner />
  <Spinner color="secondary" />
  <Spinner color="success" />
</Stack>

Spinner Sizes​

<Stack direction="row" spacing="md" align="center">
  <Spinner size="xs" />
  <Spinner size="sm" />
  <Spinner size="md" />
  <Spinner size="lg" />
  <Spinner size="xl" />
</Stack>

Spinner Variants​

<Stack direction="row" spacing="md">
  <Spinner variant="border" />
  <Spinner variant="dots" />
  <Spinner variant="grow" />
</Stack>

Spinner Colors​

<Stack direction="row" spacing="md">
  <Spinner color="primary" />
  <Spinner color="secondary" />
  <Spinner color="success" />
  <Spinner color="warning" />
  <Spinner color="error" />
</Stack>

With Label​

<Stack spacing="sm">
  <Spinner label="Loading..." />
  <Text>Loading your content</Text>
</Stack>

Different Speeds​

<Stack direction="row" spacing="md">
  <Spinner speed="slow" />
  <Spinner speed="normal" />
  <Spinner speed="fast" />
</Stack>

Custom Thickness​

<Stack direction="row" spacing="md">
  <Spinner thickness={1} />
  <Spinner thickness={2} />
  <Spinner thickness={4} />
</Stack>

Loading States​

Button with Spinner​

<Button disabled={loading}>
  {loading ? (
    <>
      <Spinner size="sm" />
      Loading...
    </>
  ) : (
    'Submit'
  )}
</Button>

Full Page Loading​

function LoadingOverlay() {
  return (
    <Box
      position="fixed"
      top={0}
      left={0}
      right={0}
      bottom={0}
      display="flex"
      alignItems="center"
      justifyContent="center"
      background="rgba(255, 255, 255, 0.8)"
    >
      <Stack spacing="md" align="center">
        <Spinner size="xl" />
        <Text>Loading your application...</Text>
      </Stack>
    </Box>
  );
}

Card Loading​

<Card>
  <Box
    position="relative"
    minHeight={200}
  >
    {loading && (
      <Box
        position="absolute"
        top={0}
        left={0}
        right={0}
        bottom={0}
        display="flex"
        alignItems="center"
        justifyContent="center"
      >
        <Spinner />
      </Box>
    )}
    {!loading && content}
  </Box>
</Card>

Customization​

Custom Styles​

<Spinner
  style={{
    '--spinner-color': '#FF6B6B',
    '--spinner-size': '48px',
    '--spinner-border-width': '4px',
  }}
/>

Custom Animation​

<Spinner
  style={{
    animation: 'custom-spin 1s ease-in-out infinite',
    '@keyframes custom-spin': {
      '0%': { transform: 'rotate(0deg)' },
      '100%': { transform: 'rotate(360deg)' },
    },
  }}
/>

Best Practices​

  1. Use appropriate sizes
  2. Show loading context
  3. Maintain consistent usage
  4. Consider accessibility
  5. Provide feedback duration
  6. Use meaningful colors
  7. Handle timeouts

API Reference​

Size Values​

const spinnerSizes = {
  xs: 16,
  sm: 24,
  md: 32,
  lg: 40,
  xl: 48,
};

Animation Speeds​

const spinnerSpeeds = {
  slow: '1.5s',
  normal: '1s',
  fast: '0.5s',
};

Theme Customization​

const theme = {
  spinner: {
    sizes: spinnerSizes,
    colors: {
      primary: '#2196f3',
      secondary: '#9c27b0',
      success: '#4caf50',
      warning: '#ff9800',
      error: '#f44336',
    },
    variants: {
      border: {
        animation: 'spin 1s linear infinite',
      },
      dots: {
        animation: 'pulse 1.5s ease-in-out infinite',
      },
      grow: {
        animation: 'grow 1s ease-in-out infinite',
      },
    },
  },
};