Display

Loader

Spinning loader indicator.

Available inreactangular

Preview

Live previewreal component

Install

TerminalBash

$ npx mcp-elements add loader

Usage

loader-example.tsxTSX

import { Loader } from '@mcp-elements/react'

export function Example() {
  return (
    <div className="flex items-center gap-4">
      <Loader size="sm" />
      <Loader size="md" />
      <Loader size="lg" variant="muted" />
    </div>
  )
}

Props

Prop	Type	Default	Description
`size`	`'sm' \| 'md' \| 'lg' \| 'xl'`	`'md'`	Diameter of the spinner
`variant`	`'primary' \| 'muted'`	`'primary'`	Color treatment of the spinner