0
# Circular Spinners
1

2
Circular loading indicators with various animation patterns, perfect for general loading states and button spinners. These spinners use a single `size` property to control their dimensions.
3

4
## Capabilities
5

6
### ClipLoader
7

8
A clipped circle spinner with a rotating arc animation. One of the most popular and lightweight spinners.
9

10
```typescript { .api }
11
/**
12
 * Clipped circle spinner with rotating arc animation
13
 * @param props - LoaderSizeProps with optional size configuration
14
 * @returns JSX.Element | null - Returns null when loading is false
15
 */
16
function ClipLoader(props: LoaderSizeProps): JSX.Element | null;
17
```
18

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

25
**Usage Examples:**
26

27
```typescript
28
import { ClipLoader } from "react-spinners";
29

30
// Basic usage
31
<ClipLoader loading={isLoading} color="#36d7b7" />
32

33
// Custom size and styling
34
<ClipLoader
35
  loading={true}
36
  color="#ff6b6b"
37
  size={60}
38
  cssOverride={{
39
    display: "block",
40
    margin: "0 auto",
41
  }}
42
/>
43

44
// Button spinner
45
<button disabled={submitting}>
46
  {submitting ? (
47
    <ClipLoader loading={true} size={16} color="#ffffff" />
48
  ) : (
49
    "Submit"
50
  )}
51
</button>
52
```
53

54
### CircleLoader
55

56
A full circle spinner with a rotating border animation.
57

58
```typescript { .api }
59
/**
60
 * Full circle spinner with rotating border animation
61
 * @param props - LoaderSizeProps with optional size configuration
62
 * @returns JSX.Element | null - Returns null when loading is false
63
 */
64
function CircleLoader(props: LoaderSizeProps): JSX.Element | null;
65
```
66

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

73
**Usage Examples:**
74

75
```typescript
76
import { CircleLoader } from "react-spinners";
77

78
// Default usage
79
<CircleLoader loading={isLoading} />
80

81
// Large circle with custom color
82
<CircleLoader
83
  loading={true}
84
  color="#007bff"
85
  size={80}
86
  cssOverride={{ margin: "20px auto" }}
87
/>
88
```
89

90
### ClockLoader
91

92
A clock-like spinner with rotating hand animation.
93

94
```typescript { .api }
95
/**
96
 * Clock-like spinner with rotating hand animation
97
 * @param props - LoaderSizeProps with optional size configuration
98
 * @returns JSX.Element | null - Returns null when loading is false
99
 */
100
function ClockLoader(props: LoaderSizeProps): JSX.Element | null;
101
```
102

103
**Default Values:**
104
- `size`: 50
105
- `color`: "#000000"
106
- `loading`: true
107
- `speedMultiplier`: 1
108

109
**Usage Examples:**
110

111
```typescript
112
import { ClockLoader } from "react-spinners";
113

114
// Clock spinner for time-related operations
115
<ClockLoader loading={isProcessing} color="#28a745" size={40} />
116

117
// Slow clock animation
118
<ClockLoader
119
  loading={true}
120
  color="#6f42c1"
121
  size={70}
122
  speedMultiplier={0.5}
123
/>
124
```
125

126
### BounceLoader
127

128
A bouncing circle animation with scale transformation.
129

130
```typescript { .api }
131
/**
132
 * Bouncing circle animation with scale transformation
133
 * @param props - LoaderSizeProps with optional size configuration
134
 * @returns JSX.Element | null - Returns null when loading is false
135
 */
136
function BounceLoader(props: LoaderSizeProps): JSX.Element | null;
137
```
138

139
**Default Values:**
140
- `size`: 60
141
- `color`: "#000000"
142
- `loading`: true
143
- `speedMultiplier`: 1
144

145
**Usage Examples:**
146

147
```typescript
148
import { BounceLoader } from "react-spinners";
149

150
// Fun bouncing animation
151
<BounceLoader loading={isLoading} color="#ff9800" />
152

153
// Large bounce with custom styling
154
<BounceLoader
155
  loading={true}
156
  color="#e91e63"
157
  size={100}
158
  cssOverride={{
159
    display: "block",
160
    margin: "0 auto",
161
    borderColor: "red",
162
  }}
163
/>
164
```
165

166
### PuffLoader
167

168
A puffing circle animation that scales in and out.
169

170
```typescript { .api }
171
/**
172
 * Puffing circle animation that scales in and out
173
 * @param props - LoaderSizeProps with optional size configuration
174
 * @returns JSX.Element | null - Returns null when loading is false
175
 */
176
function PuffLoader(props: LoaderSizeProps): JSX.Element | null;
177
```
178

179
**Default Values:**
180
- `size`: 60
181
- `color`: "#000000"
182
- `loading`: true
183
- `speedMultiplier`: 1
184

185
**Usage Examples:**
186

187
```typescript
188
import { PuffLoader } from "react-spinners";
189

190
// Puffing animation
191
<PuffLoader loading={isUploading} color="#17a2b8" />
192

193
// Faster puff animation
194
<PuffLoader
195
  loading={true}
196
  color="#fd7e14"
197
  size={80}
198
  speedMultiplier={1.5}
199
/>
200
```
201

202
### SquareLoader
203

204
A rotating square spinner.
205

206
```typescript { .api }
207
/**
208
 * Rotating square spinner
209
 * @param props - LoaderSizeProps with optional size configuration
210
 * @returns JSX.Element | null - Returns null when loading is false
211
 */
212
function SquareLoader(props: LoaderSizeProps): JSX.Element | null;
213
```
214

215
**Default Values:**
216
- `size`: 50
217
- `color`: "#000000"
218
- `loading`: true
219
- `speedMultiplier`: 1
220

221
**Usage Examples:**
222

223
```typescript
224
import { SquareLoader } from "react-spinners";
225

226
// Square spinner
227
<SquareLoader loading={isProcessing} color="#20c997" />
228

229
// Large square with slow rotation
230
<SquareLoader
231
  loading={true}
232
  color="#6610f2"
233
  size={75}
234
  speedMultiplier={0.7}
235
/>
236
```
237

238
### SkewLoader
239

240
A skewed rectangle with rotation animation.
241

242
```typescript { .api }
243
/**
244
 * Skewed rectangle with rotation animation
245
 * @param props - LoaderSizeProps with optional size configuration
246
 * @returns JSX.Element | null - Returns null when loading is false
247
 */
248
function SkewLoader(props: LoaderSizeProps): JSX.Element | null;
249
```
250

251
**Default Values:**
252
- `size`: 20
253
- `color`: "#000000"
254
- `loading`: true
255
- `speedMultiplier`: 1
256

257
**Usage Examples:**
258

259
```typescript
260
import { SkewLoader } from "react-spinners";
261

262
// Skewed spinner (note smaller default size)
263
<SkewLoader loading={isLoading} color="#dc3545" />
264

265
// Larger skewed spinner
266
<SkewLoader
267
  loading={true}
268
  color="#343a40"
269
  size={35}
270
  cssOverride={{ transform: "scale(1.2)" }}
271
/>
272
```
273

274
### RingLoader
275

276
Two overlapping rings with 3D rotation animations creating a complex spinning effect.
277

278
```typescript { .api }
279
/**
280
 * Two overlapping rings with 3D rotation animations creating a complex spinning effect
281
 * @param props - LoaderSizeProps with size configuration
282
 * @returns JSX.Element | null - Returns null when loading is false
283
 */
284
function RingLoader(props: LoaderSizeProps): JSX.Element | null;
285
```
286

287
**Default Values:**
288
- `size`: 60
289
- `color`: "#000000"
290
- `loading`: true
291
- `speedMultiplier`: 1
292

293
**Usage Examples:**
294

295
```typescript
296
import { RingLoader } from "react-spinners";
297

298
// 3D ring animation
299
<RingLoader loading={isLoading} color="#dc3545" />
300

301
// Large ring with custom styling
302
<RingLoader
303
  loading={true}
304
  color="#198754"
305
  size={80}
306
  cssOverride={{
307
    transform: "scale(1.1)",
308
  }}
309
/>
310

311
// Slow ring rotation
312
<RingLoader
313
  loading={true}
314
  color="#6610f2"
315
  size={70}
316
  speedMultiplier={0.7}
317
/>
318
```
319

320
### MoonLoader
321

322
A circular loader with a small moon orbiting around a ring.
323

324
```typescript { .api }
325
/**
326
 * A circular loader with a small moon orbiting around a ring
327
 * @param props - LoaderSizeProps with size configuration
328
 * @returns JSX.Element | null - Returns null when loading is false
329
 */
330
function MoonLoader(props: LoaderSizeProps): JSX.Element | null;
331
```
332

333
**Default Values:**
334
- `size`: 60
335
- `color`: "#000000"
336
- `loading`: true
337
- `speedMultiplier`: 1
338

339
**Usage Examples:**
340

341
```typescript
342
import { MoonLoader } from "react-spinners";
343

344
// Moon orbiting animation
345
<MoonLoader loading={isLoading} color="#007bff" />
346

347
// Large moon loader
348
<MoonLoader
349
  loading={true}
350
  color="#6f42c1"
351
  size={80}
352
  cssOverride={{
353
    display: "block",
354
    margin: "0 auto",
355
  }}
356
/>
357

358
// Fast moon orbit
359
<MoonLoader
360
  loading={true}
361
  color="#dc3545"
362
  size={50}
363
  speedMultiplier={1.5}
364
/>
365
```
366

367
### HashLoader
368

369
A hash-shaped loader with expanding and contracting animation.
370

371
```typescript { .api }
372
/**
373
 * A hash-shaped loader with expanding and contracting animation
374
 * @param props - LoaderSizeProps with size configuration
375
 * @returns JSX.Element | null - Returns null when loading is false
376
 */
377
function HashLoader(props: LoaderSizeProps): JSX.Element | null;
378
```
379

380
**Default Values:**
381
- `size`: 50
382
- `color`: "#000000"
383
- `loading`: true
384
- `speedMultiplier`: 1
385

386
**Usage Examples:**
387

388
```typescript
389
import { HashLoader } from "react-spinners";
390

391
// Hash animation
392
<HashLoader loading={isLoading} color="#28a745" />
393

394
// Large hash with custom styling
395
<HashLoader
396
  loading={true}
397
  color="#fd7e14"
398
  size={70}
399
  cssOverride={{
400
    filter: "drop-shadow(0 0 5px rgba(0,0,0,0.3))",
401
  }}
402
/>
403

404
// Slower hash animation
405
<HashLoader
406
  loading={true}
407
  color="#20c997"
408
  size={60}
409
  speedMultiplier={0.8}
410
/>
411
```
412

413
### DotLoader
414

415
A rotating spinner with multiple dots around a circle.
416

417
```typescript { .api }
418
/**
419
 * A rotating spinner with multiple dots around a circle
420
 * @param props - LoaderSizeProps with size configuration
421
 * @returns JSX.Element | null - Returns null when loading is false
422
 */
423
function DotLoader(props: LoaderSizeProps): JSX.Element | null;
424
```
425

426
**Default Values:**
427
- `size`: 60
428
- `color`: "#000000"
429
- `loading`: true
430
- `speedMultiplier`: 1
431

432
**Usage Examples:**
433

434
```typescript
435
import { DotLoader } from "react-spinners";
436

437
// Rotating dots animation
438
<DotLoader loading={isLoading} color="#007bff" />
439

440
// Large dot circle
441
<DotLoader
442
  loading={true}
443
  color="#28a745"
444
  size={80}
445
  cssOverride={{
446
    display: "block",
447
    margin: "0 auto",
448
  }}
449
/>
450

451
// Fast rotation
452
<DotLoader
453
  loading={true}
454
  color="#dc3545"
455
  size={50}
456
  speedMultiplier={1.5}
457
/>
458
```
459

460
## Common Patterns
461

462
### Conditional Rendering
463

464
All circular spinners return `null` when `loading={false}`, making them perfect for conditional display:
465

466
```typescript
467
// Spinner only shows when loading
468
{isLoading && <ClipLoader color="#36d7b7" />}
469

470
// Or use the loading prop
471
<ClipLoader loading={isLoading} color="#36d7b7" />
472
```
473

474
### Responsive Sizing
475

476
Use CSS units or responsive values for different screen sizes:
477

478
```typescript
479
<CircleLoader
480
  size="3rem"
481
  cssOverride={{
482
    fontSize: "clamp(16px, 4vw, 24px)",
483
  }}
484
/>
485
```
486

487
### Accessibility
488

489
All spinners support ARIA attributes for screen readers:
490

491
```typescript
492
<ClipLoader
493
  loading={true}
494
  color="#007bff"
495
  aria-label="Loading content"
496
  role="status"
497
  aria-live="polite"
498
/>
499
```