0
# Specialty Spinners
1

2
Unique animations with distinctive visual styles, great for branded loading experiences and specific use cases. These spinners offer creative alternatives to standard loading indicators.
3

4
## Capabilities
5

6
### PacmanLoader
7

8
Iconic Pacman animation eating dots, perfect for gaming interfaces and playful applications.
9

10
```typescript { .api }
11
/**
12
 * Iconic Pacman animation eating dots
13
 * @param props - LoaderSizeMarginProps with size and margin configuration
14
 * @returns JSX.Element | null - Returns null when loading is false
15
 */
16
function PacmanLoader(props: LoaderSizeMarginProps): JSX.Element | null;
17
```
18

19
**Default Values:**
20
- `size`: 25
21
- `margin`: 2
22
- `color`: "#000000"
23
- `loading`: true
24
- `speedMultiplier`: 1
25

26
**Usage Examples:**
27

28
```typescript
29
import { PacmanLoader } from "react-spinners";
30

31
// Classic Pacman animation
32
<PacmanLoader loading={isLoading} color="#ffff00" />
33

34
// Gaming theme with custom styling
35
<PacmanLoader
36
  loading={true}
37
  color="#ffd700"
38
  size={35}
39
  cssOverride={{
40
    filter: "drop-shadow(2px 2px 4px rgba(0,0,0,0.3))",
41
  }}
42
/>
43

44
// Large Pacman for loading screens
45
<PacmanLoader
46
  loading={true}
47
  color="#ff6b6b"
48
  size={50}
49
  margin={4}
50
/>
51
```
52

53
### ClimbingBoxLoader
54

55
Animated boxes climbing over each other, great for construction or building-themed apps.
56

57
```typescript { .api }
58
/**
59
 * Animated boxes climbing over each other
60
 * @param props - LoaderSizeProps with size configuration
61
 * @returns JSX.Element | null - Returns null when loading is false
62
 */
63
function ClimbingBoxLoader(props: LoaderSizeProps): JSX.Element | null;
64
```
65

66
**Default Values:**
67
- `size`: 15
68
- `color`: "#000000"
69
- `loading`: true
70
- `speedMultiplier`: 1
71

72
**Usage Examples:**
73

74
```typescript
75
import { ClimbingBoxLoader } from "react-spinners";
76

77
// Climbing boxes animation
78
<ClimbingBoxLoader loading={isBuilding} color="#28a745" />
79

80
// Construction theme
81
<ClimbingBoxLoader
82
  loading={true}
83
  color="#fd7e14"
84
  size={20}
85
  cssOverride={{
86
    transform: "scale(1.2)",
87
  }}
88
/>
89

90
// Slow climbing animation
91
<ClimbingBoxLoader
92
  loading={true}
93
  color="#6c757d"
94
  size={18}
95
  speedMultiplier={0.7}
96
/>
97
```
98

99
### GridLoader
100

101
Grid of squares with wave-like animation, perfect for data processing and grid-based applications.
102

103
```typescript { .api }
104
/**
105
 * Grid of squares with wave-like animation
106
 * @param props - LoaderSizeProps with size configuration
107
 * @returns JSX.Element | null - Returns null when loading is false
108
 */
109
function GridLoader(props: LoaderSizeProps): JSX.Element | null;
110
```
111

112
**Default Values:**
113
- `size`: 15
114
- `color`: "#000000"
115
- `loading`: true
116
- `speedMultiplier`: 1
117

118
**Usage Examples:**
119

120
```typescript
121
import { GridLoader } from "react-spinners";
122

123
// Grid wave animation
124
<GridLoader loading={isProcessing} color="#007bff" />
125

126
// Large grid for dashboards
127
<GridLoader
128
  loading={true}
129
  color="#17a2b8"
130
  size={20}
131
  cssOverride={{
132
    display: "block",
133
    margin: "20px auto",
134
  }}
135
/>
136

137
// Fast grid animation
138
<GridLoader
139
  loading={true}
140
  color="#e83e8c"
141
  size={12}
142
  speedMultiplier={1.5}
143
/>
144
```
145

146
### PropagateLoader
147

148
Wave propagation effect with expanding circles, ideal for network or communication apps.
149

150
```typescript { .api }
151
/**
152
 * Wave propagation effect with expanding circles
153
 * @param props - LoaderSizeProps with size configuration
154
 * @returns JSX.Element | null - Returns null when loading is false
155
 */
156
function PropagateLoader(props: LoaderSizeProps): JSX.Element | null;
157
```
158

159
**Default Values:**
160
- `size`: 15
161
- `color`: "#000000"
162
- `loading`: true
163
- `speedMultiplier`: 1
164

165
**Usage Examples:**
166

167
```typescript
168
import { PropagateLoader } from "react-spinners";
169

170
// Wave propagation
171
<PropagateLoader loading={isConnecting} color="#20c997" />
172

173
// Network communication theme
174
<PropagateLoader
175
  loading={true}
176
  color="#0d6efd"
177
  size={18}
178
  cssOverride={{
179
    opacity: 0.8,
180
  }}
181
/>
182

183
// Slow wave propagation
184
<PropagateLoader
185
  loading={true}
186
  color="#6610f2"
187
  size={20}
188
  speedMultiplier={0.6}
189
/>
190
```
191

192
### ScaleLoader
193

194
Configurable number of scaling bars, perfect for audio/music applications and data visualization.
195

196
```typescript { .api }
197
/**
198
 * Configurable number of scaling bars like an audio equalizer
199
 * @param props - ScaleLoaderProps with height, width, radius, margin, and barCount
200
 * @returns JSX.Element | null - Returns null when loading is false
201
 */
202
function ScaleLoader(props: ScaleLoaderProps): JSX.Element | null;
203

204
interface ScaleLoaderProps extends LoaderHeightWidthRadiusProps {
205
  /** Number of bars to display */
206
  barCount?: number;
207
}
208
```
209

210
**Default Values:**
211
- `height`: 35
212
- `width`: 4
213
- `radius`: 2
214
- `margin`: 2
215
- `barCount`: 5
216
- `color`: "#000000"
217
- `loading`: true
218
- `speedMultiplier`: 1
219

220
**Usage Examples:**
221

222
```typescript
223
import { ScaleLoader } from "react-spinners";
224

225
// Audio equalizer style
226
<ScaleLoader loading={isPlaying} color="#1db954" />
227

228
// More bars for richer animation
229
<ScaleLoader
230
  loading={true}
231
  color="#ff6b6b"
232
  barCount={8}
233
  height={40}
234
  width={5}
235
/>
236

237
// Thin bars with tight spacing
238
<ScaleLoader
239
  loading={true}
240
  color="#007bff"
241
  barCount={12}
242
  height={30}
243
  width={2}
244
  margin={1}
245
  cssOverride={{
246
    filter: "blur(0.5px)",
247
  }}
248
/>
249

250
// Wide bars for bold effect
251
<ScaleLoader
252
  loading={true}
253
  color="#28a745"
254
  barCount={3}
255
  height={50}
256
  width={10}
257
  margin={5}
258
  radius={5}
259
/>
260
```
261

262
## Common Patterns
263

264
### Gaming and Entertainment
265

266
Use PacmanLoader for gaming contexts:
267

268
```typescript
269
<div className="game-loading">
270
  <PacmanLoader loading={isLoadingLevel} color="#ffff00" size={40} />
271
  <p>Loading next level...</p>
272
</div>
273
```
274

275
### Construction and Building Apps
276

277
ClimbingBoxLoader for construction themes:
278

279
```typescript
280
<div className="build-progress">
281
  <ClimbingBoxLoader loading={isBuilding} color="#fd7e14" size={18} />
282
  <span>Building your project...</span>
283
</div>
284
```
285

286
### Data and Analytics
287

288
GridLoader for data processing:
289

290
```typescript
291
<div className="data-processing">
292
  <GridLoader loading={isAnalyzing} color="#6610f2" size={16} />
293
  <p>Analyzing data patterns...</p>
294
</div>
295
```
296

297
### Audio and Music Apps
298

299
ScaleLoader for audio contexts:
300

301
```typescript
302
// Music player loading
303
<div className="music-loading">
304
  <ScaleLoader
305
    loading={isBuffering}
306
    color="#1ed760"
307
    barCount={10}
308
    height={25}
309
    width={3}
310
    margin={1}
311
  />
312
  <span>Buffering audio...</span>
313
</div>
314

315
// Audio processing
316
<ScaleLoader
317
  loading={isProcessingAudio}
318
  color="#ff6b6b"
319
  barCount={16}
320
  height={35}
321
  width={2}
322
  speedMultiplier={1.5}
323
/>
324
```
325

326
### Network and Communication
327

328
PropagateLoader for network operations:
329

330
```typescript
331
<div className="network-status">
332
  <PropagateLoader loading={isConnecting} color="#17a2b8" size={16} />
333
  <span>Connecting to server...</span>
334
</div>
335
```
336

337
### Custom Branding
338

339
Match spinners to your brand:
340

341
```typescript
342
const brandColors = {
343
  primary: "#007bff",
344
  secondary: "#6c757d",
345
  success: "#28a745",
346
  warning: "#ffc107",
347
};
348

349
<ScaleLoader
350
  loading={true}
351
  color={brandColors.primary}
352
  barCount={6}
353
  cssOverride={{
354
    filter: `hue-rotate(${themeHue}deg)`,
355
  }}
356
/>
357
```
358

359
### Contextual Animations
360

361
Different spinners for different operations:
362

363
```typescript
364
function LoadingSpinner({ operation, ...props }) {
365
  switch (operation) {
366
    case "gaming":
367
      return <PacmanLoader {...props} color="#ffff00" />;
368
    case "building":
369
      return <ClimbingBoxLoader {...props} color="#fd7e14" />;
370
    case "audio":
371
      return <ScaleLoader {...props} barCount={8} color="#1ed760" />;
372
    case "data":
373
      return <GridLoader {...props} color="#6610f2" />;
374
    case "network":
375
      return <PropagateLoader {...props} color="#17a2b8" />;
376
    default:
377
      return <GridLoader {...props} />;
378
  }
379
}
380

381
<LoadingSpinner operation="audio" loading={isProcessing} />
382
```
383

384
### Performance Optimization
385

386
Individual imports for better tree shaking:
387

388
```typescript
389
// Instead of importing all specialty spinners
390
import { PacmanLoader, ScaleLoader } from "react-spinners";
391

392
// Import only what you need
393
import PacmanLoader from "react-spinners/PacmanLoader";
394
import ScaleLoader from "react-spinners/ScaleLoader";
395
```