Loader

@devgrace/ui Loader 컴포넌트

interface

interface LoaderProps {
  width?: CSSProperties['width']; // default: 24
  height?: CSSProperties['height']; // default: 24
  duration?: number; // default: 0.75
  color?: string; // default: 'currentColor'
  viewBox?: string; // viewBox = '0 0 24 24'
}

const Loader: ({ width, height, duration, color, viewBox }: LoaderProps) => JSX.Element

Usage

import { Loader } from '@devgrace/ui';

const Example = () => {
  return (
    <div style={{ display: 'flex', gap: '8px' }}>
      <Loader width={200} height={200} />
      <Loader width={100} height={100} color="#eeeeee" duration={1} />
      <Loader width={80} height={80} color="red" duration={1.25} />
      <Loader width={60} height={60} color="green" duration={1.5} />
      <Loader width={40} height={40} color="blue" duration={1.75} />
      <Loader width={20} height={20} color="orange" duration={2} />
    </div>
  );
};

Example