Loading Spinner

Loading Spinner component allows users to get some indication when an async action is being performed. It can be used as a standalone component or inside any other container component.

Usage

import { LoadingSpinner } from '@elegantui/atoms';

Basic Example

import { LoadingSpinner } from '@elegantui/atoms';

export default function App() {
  return <LoadingSpinner />;
}

Appearances

LoadingSpinner component is available in six appearances.

import { LoadingSpinner } from '@elegantui/atoms';

export default function App() {
  return (
    <LoadingSpinner
      appearance='primary' // 'default' | 'secondary' | 'success' | 'warning' | 'error'
    />
  );
}

Sizes

LoadingSpinner component is available in four sizes.

import { LoadingSpinner } from '@elegantui/atoms';

export default function App() {
  return (
    <LoadingSpinner
      size='sm' // 'md' | 'lg' | 'xl'
      appearance='primary'
    />
  );
}

Custom styles

LoadingSpinner component allows you to configure your own styles. Styles can be provided either through the React style prop or CSS classes using className prop.

Available Props