LoadersNew
Grid Loader
A 3×3 grid like a device indicator. Over forty preset patterns and three blink modes.
Customize
color
Based on Grid Loader (MIT license) · Terms of use
More in Pro
View allProps
11 properties| Property | Type | Default | Description |
|---|---|---|---|
| pattern | PresetPattern | GridMatrix | "plus-hollow" | A 9-cell pattern: a preset or your own 3×3 matrix. |
| mode | 'pulse' | 'sequence' | 'stagger' | "pulse" | How cells blink: together, as a pattern sequence or as a wave. |
| sequence | Array<PresetPattern | GridMatrix> | — | Patterns in turn for the sequence mode. |
| speed | 'slow' | 'normal' | 'fast' | "normal" | Animation speed. |
| size | 'sm' | 'md' | 'lg' | 'xl' | number | "md" | Loader size or a number in pixels. |
| color | string | "white" | Cell color: white or any CSS color. |
| gap | number | 0 | Gap between cells in pixels. |
| blur | number | 0 | Blur in pixels for a soft glow. |
| rounded | boolean | false | Round cells instead of square. |
| static | boolean | false | Show the pattern without animation. |
| className | string | — | Classes for the wrapper. |
Dependencies
3 required packages
npm install motion clsx tailwind-merge