Loader

Name: Loader
Author: reaviz

ASecurity

Animated loading indicator with three pulsing dots. Each dot animates opacity and scale with staggered timing using Framer Motion.

4 stars
0 votes
0 copies
2 views
Added May 27, 2026

data-aitypescript

Security analysis

A100/100

Scanned May 27, 2026

npx -y skills add reaviz/skills --skill loader --agent claude-code

Installs into .claude/skills of the current project.

Are you the author of Loader?

Add the live security badge to your README. It updates with every re-scan.

[![Security: A — Skills Directory](https://www.skillsdirectory.com/api/skills/reaviz-loader/badge)](https://www.skillsdirectory.com/skills/reaviz-loader)

More formats (shields.io, HTML) on the badges page. Keep it an A: scan every change in CI with Pro.

Download with Pro

SKILL.md

# DotsLoader

Animated loading indicator with three pulsing dots. Each dot animates opacity and scale with staggered timing using Framer Motion.

## Import

```tsx
import { DotsLoader } from 'reablocks';
```

## DotsLoader Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `size` | `'small' \| 'medium' \| 'large'` | `'medium'` | Dot size variant |
| `speed` | `number` | `0.2` | Animation speed (lower = faster) |
| `className` | `string` | — | Additional CSS classes |
| `theme` | `DotsLoaderTheme` | — | Per-instance theme override |

## Basic Usage

```tsx
<DotsLoader />
```

## Sizes

```tsx
<DotsLoader size="small" />
<DotsLoader size="medium" />
<DotsLoader size="large" />
```

Dot dimensions: small = `w-1 h-1`, medium = `w-1.5 h-1.5`, large = `w-2 h-2`.

## Custom Speed

```tsx
<DotsLoader speed={0.1} />  {/* Faster */}
<DotsLoader speed={0.5} />  {/* Slower */}
```

## DotsLoaderTheme Interface

```typescript
interface DotsLoaderTheme {
  base: string;    // Container (flex)
  dot: string;     // Dot element (rounded, color)
  sizes: {
    small: string;
    medium: string;
    large: string;
    [key: string]: string;
  };
}
```