Spinner & Page Loader

Visual indicators for loading states.

Examples

Sizes & Colors

Spinner with different sizes and colors

Page Loader

A full-screen overlay with a spinner and optional message. Useful for initial page loads or blocking transitions.

Container-level Loader Preview

Code

<wdc-spinner size="sm"></wdc-spinner>
<wdc-spinner size="md"></wdc-spinner>
<wdc-spinner size="lg"></wdc-spinner>
<wdc-spinner color="primary" size="lg"></wdc-spinner>
<div class="bg-slate-900 p-2 rounded-md">
  <wdc-spinner color="white" size="lg"></wdc-spinner>
</div>

API Reference

Input	Type	Default	Description
size	'sm' \| 'md' \| 'lg'	'md'	Size of the spinner.
color	'primary' \| 'secondary' \| 'white'	'primary'	Color of the spinner.