0
# Dot and Beat Spinners
1

2
Multi-dot animations with configurable spacing, ideal for subtle loading indicators and inline progress display. These spinners use both `size` and `margin` properties to control dot dimensions and spacing.
3

4
## Capabilities
5

6
### BeatLoader
7

8
Multiple dots that pulse in sequence, creating a "heartbeat" effect.
9

10
```typescript { .api }
11
/**
12
 * Multiple dots that pulse in sequence creating a heartbeat effect
13
 * @param props - LoaderSizeMarginProps with size and margin configuration
14
 * @returns JSX.Element | null - Returns null when loading is false
15
 */
16
function BeatLoader(props: LoaderSizeMarginProps): JSX.Element | null;
17
```
18

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

26
**Usage Examples:**
27

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

31
// Basic beat animation
32
<BeatLoader loading={isLoading} color="#36d7b7" />
33

34
// Larger dots with more spacing
35
<BeatLoader
36
  loading={true}
37
  color="#007bff"
38
  size={20}
39
  margin={5}
40
/>
41

42
// Inline loading text
43
<p>
44
  Loading data
45
  <BeatLoader loading={true} size={8} margin={1} color="#666" />
46
</p>
47

48
// Fast beat animation
49
<BeatLoader
50
  loading={true}
51
  color="#28a745"
52
  speedMultiplier={2}
53
  cssOverride={{ display: "inline-block" }}
54
/>
55
```
56

57
### PulseLoader
58

59
A row of dots that pulse simultaneously.
60

61
```typescript { .api }
62
/**
63
 * A row of dots that pulse simultaneously
64
 * @param props - LoaderSizeMarginProps with size and margin configuration
65
 * @returns JSX.Element | null - Returns null when loading is false
66
 */
67
function PulseLoader(props: LoaderSizeMarginProps): JSX.Element | null;
68
```
69

70
**Default Values:**
71
- `size`: 15
72
- `margin`: 2
73
- `color`: "#000000"
74
- `loading`: true
75
- `speedMultiplier`: 1
76

77
**Usage Examples:**
78

79
```typescript
80
import { PulseLoader } from "react-spinners";
81

82
// Synchronized pulse
83
<PulseLoader loading={isSubmitting} color="#dc3545" />
84

85
// Small inline pulse
86
<PulseLoader
87
  loading={true}
88
  color="#6c757d"
89
  size={10}
90
  margin={3}
91
  cssOverride={{ verticalAlign: "middle" }}
92
/>
93

94
// Large pulse with custom spacing
95
<PulseLoader
96
  loading={true}
97
  color="#17a2b8"
98
  size={25}
99
  margin={8}
100
/>
101
```
102

103
### SyncLoader
104

105
Dots that bounce up and down in synchronization.
106

107
```typescript { .api }
108
/**
109
 * Dots that bounce up and down in synchronization
110
 * @param props - LoaderSizeMarginProps with size and margin configuration
111
 * @returns JSX.Element | null - Returns null when loading is false
112
 */
113
function SyncLoader(props: LoaderSizeMarginProps): JSX.Element | null;
114
```
115

116
**Default Values:**
117
- `size`: 15
118
- `margin`: 2
119
- `color`: "#000000"
120
- `loading`: true
121
- `speedMultiplier`: 1
122

123
**Usage Examples:**
124

125
```typescript
126
import { SyncLoader } from "react-spinners";
127

128
// Synchronized bouncing
129
<SyncLoader loading={isProcessing} color="#fd7e14" />
130

131
// Tight spacing
132
<SyncLoader
133
  loading={true}
134
  color="#e83e8c"
135
  size={12}
136
  margin={1}
137
/>
138

139
// Slow synchronized animation
140
<SyncLoader
141
  loading={true}
142
  color="#20c997"
143
  size={18}
144
  speedMultiplier={0.6}
145
/>
146
```
147

148
### RiseLoader
149

150
Dots that rise and fall in a wave pattern.
151

152
```typescript { .api }
153
/**
154
 * Dots that rise and fall in a wave pattern
155
 * @param props - LoaderSizeMarginProps with size and margin configuration
156
 * @returns JSX.Element | null - Returns null when loading is false
157
 */
158
function RiseLoader(props: LoaderSizeMarginProps): JSX.Element | null;
159
```
160

161
**Default Values:**
162
- `size`: 15
163
- `margin`: 2
164
- `color`: "#000000"
165
- `loading`: true
166
- `speedMultiplier`: 1
167

168
**Usage Examples:**
169

170
```typescript
171
import { RiseLoader } from "react-spinners";
172

173
// Wave-like rising animation
174
<RiseLoader loading={isUploading} color="#6610f2" />
175

176
// Compact rise animation
177
<RiseLoader
178
  loading={true}
179
  color="#495057"
180
  size={10}
181
  margin={1}
182
/>
183
```
184

185
### RotateLoader
186

187
Small lines that rotate around a central point.
188

189
```typescript { .api }
190
/**
191
 * Small lines that rotate around a central point
192
 * @param props - LoaderSizeMarginProps with size and margin configuration
193
 * @returns JSX.Element | null - Returns null when loading is false
194
 */
195
function RotateLoader(props: LoaderSizeMarginProps): JSX.Element | null;
196
```
197

198
**Default Values:**
199
- `size`: 15
200
- `margin`: 2
201
- `color`: "#000000"
202
- `loading`: true
203
- `speedMultiplier`: 1
204

205
**Usage Examples:**
206

207
```typescript
208
import { RotateLoader } from "react-spinners";
209

210
// Rotating lines
211
<RotateLoader loading={isLoading} color="#007bff" />
212

213
// Faster rotation
214
<RotateLoader
215
  loading={true}
216
  color="#28a745"
217
  speedMultiplier={1.8}
218
  size={20}
219
/>
220
```
221

222
### GridLoader
223

224
A 3x3 grid of squares that scale and fade in sequence.
225

226
```typescript { .api }
227
/**
228
 * A 3x3 grid of squares that scale and fade in sequence
229
 * @param props - LoaderSizeMarginProps with size and margin configuration
230
 * @returns JSX.Element | null - Returns null when loading is false
231
 */
232
function GridLoader(props: LoaderSizeMarginProps): JSX.Element | null;
233
```
234

235
**Default Values:**
236
- `size`: 15
237
- `margin`: 2
238
- `color`: "#000000"
239
- `loading`: true
240
- `speedMultiplier`: 1
241

242
**Usage Examples:**
243

244
```typescript
245
import { GridLoader } from "react-spinners";
246

247
// Grid animation
248
<GridLoader loading={isProcessing} color="#6f42c1" />
249

250
// Larger grid for loading screens
251
<GridLoader
252
  loading={true}
253
  color="#198754"
254
  size={20}
255
  margin={4}
256
  cssOverride={{
257
    display: "block",
258
    margin: "0 auto",
259
  }}
260
/>
261

262
// Fast grid animation
263
<GridLoader
264
  loading={true}
265
  color="#fd7e14"
266
  size={12}
267
  margin={1}
268
  speedMultiplier={1.5}
269
/>
270
```
271

272
## Common Patterns
273

274
### Inline Loading States
275

276
Dot spinners work well inline with text:
277

278
```typescript
279
<span>
280
  Saving changes
281
  <BeatLoader loading={isSaving} size={8} margin={2} color="#666" />
282
</span>
283
```
284

285
### Button Loading States
286

287
Small dots are perfect for button spinners:
288

289
```typescript
290
<button disabled={submitting}>
291
  {submitting ? (
292
    <>
293
      <PulseLoader loading={true} size={8} color="#ffffff" />
294
      <span style={{ marginLeft: 8 }}>Submitting...</span>
295
    </>
296
  ) : (
297
    "Submit Form"
298
  )}
299
</button>
300
```
301

302
### Custom Color Themes
303

304
Match your app's color scheme:
305

306
```typescript
307
const theme = {
308
  primary: "#007bff",
309
  success: "#28a745",
310
  warning: "#ffc107",
311
  danger: "#dc3545",
312
};
313

314
<BeatLoader loading={true} color={theme.primary} />
315
```
316

317
### Responsive Margins
318

319
Adjust spacing based on container size:
320

321
```typescript
322
<SyncLoader
323
  size={16}
324
  margin="0.5rem"
325
  cssOverride={{
326
    margin: "clamp(8px, 2vw, 16px)",
327
  }}
328
/>
329
```