Loader Component Preview

This page allows developers to test different configurations of the Loader component. Adjust the settings below to see how the loader looks with different options.

Configuration

Preview

Usage

import Loader from '@/app/_components/ui/loader';

// Basic usage
<Loader />

// With custom options
<Loader
  size="medium"
  text="Loading..."
  useDoodle={true}
  doodle="/doodles/objects/paperplane.svg"
  centered={false}
  variant="primary"
/>

// Available sizes: 'small', 'medium', 'large'
// Available variants: 'primary', 'secondary', 'accent'
// Text is optional
// useDoodle defaults to true
// doodle defaults to '/doodles/specialcharacters/lightning.svg'
// centered defaults to false
// variant defaults to 'primary'