BNA

BNA UI
22

A loading indicator component with multiple variants and customization options.

Installation

pnpm dlx bna-ui add spinner

Usage

import {
  Spinner,
  LoadingOverlay,
  InlineLoader,
  ButtonSpinner,
} from '@/components/ui/spinner';
<Spinner size='default' variant='default' />

Examples

Default

Variants

Sizes

With Labels

Speed Control

Custom Colors

Loading Overlay

Inline Loader

API Reference

Spinner

The main spinner component with multiple variants and customization options.

PropTypeDefaultDescription
size'default' | 'sm' | 'lg' | 'icon''default'The size of the spinner.
variant'default' | 'cirlce' | 'dots' | 'pulse' | 'bars''default'The visual variant of the spinner.
labelstring-Optional label text to display with spinner.
showLabelbooleanfalseWhether to show the default "Loading..." label.
styleViewStyle-Additional styles to apply to the container.
colorstring-Custom color for the spinner.
speed'slow' | 'normal' | 'fast''normal'Animation speed of the spinner.

LoadingOverlay

A full-screen overlay component with spinner for blocking UI interactions during loading.

PropTypeDefaultDescription
visibleboolean-Whether the overlay is visible.
backdropbooleantrueWhether to show a backdrop behind the spinner.
backdropColorstring-Custom backdrop color.
backdropOpacitynumber0.5Opacity of the backdrop (0-1).
onRequestClose() => void-Callback when overlay should be closed.
...spinnerPropsSpinnerProps-All props from the Spinner component.

InlineLoader

A compact spinner optimized for inline usage within text or small containers.

PropTypeDefaultDescription
size'default' | 'sm' | 'lg' | 'icon''sm'The size of the spinner.
variant'default' | 'cirlce' | 'dots' | 'pulse' | 'bars''default'The visual variant of the spinner.
colorstring-Custom color for the spinner.

ButtonSpinner

A spinner component specifically designed for button loading states.

PropTypeDefaultDescription
size'default' | 'sm' | 'lg' | 'icon''sm'The size of the spinner.
variant'default' | 'cirlce' | 'dots' | 'pulse' | 'bars''default'The visual variant of the spinner.
colorstring-Custom color for the spinner.

Accessibility

The Spinner component is built with accessibility in mind:

  • Provides meaningful loading states for screen readers
  • Supports custom labels for better context
  • Maintains proper contrast ratios for visibility
  • Non-intrusive animations that respect user preferences
  • Loading overlays properly manage focus and interaction states