0
# Bar and Linear Spinners
1

2
Linear progress indicators and bar animations, perfect for form submissions and content loading states. These spinners use height and width properties for precise sizing control.
3

4
## Capabilities
5

6
### BarLoader
7

8
A horizontal progress bar with animated loading fill.
9

10
```typescript { .api }
11
/**
12
 * Horizontal progress bar with animated loading fill
13
 * @param props - LoaderHeightWidthProps with height and width configuration
14
 * @returns JSX.Element | null - Returns null when loading is false
15
 */
16
function BarLoader(props: LoaderHeightWidthProps): JSX.Element | null;
17
```
18

19
**Default Values:**
20
- `height`: 4
21
- `width`: 100
22
- `color`: "#000000"
23
- `loading`: true
24
- `speedMultiplier`: 1
25

26
**Usage Examples:**
27

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

31
// Basic progress bar
32
<BarLoader loading={isLoading} color="#36d7b7" />
33

34
// Full-width progress bar
35
<BarLoader
36
  loading={true}
37
  color="#007bff"
38
  width="100%"
39
  height={6}
40
  cssOverride={{
41
    display: "block",
42
    margin: "0 auto",
43
  }}
44
/>
45

46
// Thick progress bar for forms
47
<BarLoader
48
  loading={isSubmitting}
49
  color="#28a745"
50
  width={300}
51
  height={8}
52
/>
53

54
// Top-of-page loading bar
55
<BarLoader
56
  loading={isPageLoading}
57
  color="#ff6b6b"
58
  width="100vw"
59
  height={3}
60
  cssOverride={{
61
    position: "fixed",
62
    top: 0,
63
    left: 0,
64
    zIndex: 9999,
65
  }}
66
/>
67
```
68

69
### FadeLoader
70

71
Multiple vertical bars that fade in and out sequentially.
72

73
```typescript { .api }
74
/**
75
 * Multiple vertical bars that fade in and out sequentially
76
 * @param props - LoaderHeightWidthRadiusProps with height, width, radius, and margin
77
 * @returns JSX.Element | null - Returns null when loading is false
78
 */
79
function FadeLoader(props: LoaderHeightWidthRadiusProps): JSX.Element | null;
80
```
81

82
**Default Values:**
83
- `height`: 15
84
- `width`: 5
85
- `radius`: 2
86
- `margin`: 2
87
- `color`: "#000000"
88
- `loading`: true
89
- `speedMultiplier`: 1
90

91
**Usage Examples:**
92

93
```typescript
94
import { FadeLoader } from "react-spinners";
95

96
// Basic fading bars
97
<FadeLoader loading={isLoading} color="#17a2b8" />
98

99
// Taller bars with custom spacing
100
<FadeLoader
101
  loading={true}
102
  color="#6610f2"
103
  height={25}
104
  width={6}
105
  margin={3}
106
/>
107

108
// Rounded bars
109
<FadeLoader
110
  loading={true}
111
  color="#e83e8c"
112
  height={20}
113
  width={4}
114
  radius={4}
115
  cssOverride={{
116
    display: "flex",
117
    justifyContent: "center",
118
  }}
119
/>
120

121
// Fast fade animation
122
<FadeLoader
123
  loading={true}
124
  color="#fd7e14"
125
  speedMultiplier={1.5}
126
  height={30}
127
/>
128
```
129

130
## Common Patterns
131

132
### Progress Bar Overlays
133

134
BarLoader works well as a progress overlay:
135

136
```typescript
137
<div style={{ position: "relative" }}>
138
  <div className="content">
139
    {/* Your content here */}
140
  </div>
141
  <BarLoader
142
    loading={isLoading}
143
    color="#007bff"
144
    width="100%"
145
    height={4}
146
    cssOverride={{
147
      position: "absolute",
148
      top: 0,
149
      left: 0,
150
    }}
151
  />
152
</div>
153
```
154

155
### Form Loading States
156

157
Perfect for form submissions:
158

159
```typescript
160
<form onSubmit={handleSubmit}>
161
  <BarLoader
162
    loading={isSubmitting}
163
    color="#28a745"
164
    width="100%"
165
    height={2}
166
    cssOverride={{ marginBottom: 16 }}
167
  />
168
  
169
  <input type="text" placeholder="Enter data..." />
170
  <button type="submit" disabled={isSubmitting}>
171
    {isSubmitting ? "Submitting..." : "Submit"}
172
  </button>
173
</form>
174
```
175

176
### Page Loading Indicators
177

178
Top-of-page loading bars:
179

180
```typescript
181
// Layout component
182
function Layout({ children }) {
183
  const [isLoading, setIsLoading] = useState(false);
184
  
185
  return (
186
    <>
187
      <BarLoader
188
        loading={isLoading}
189
        color="#007bff"
190
        width="100%"
191
        height={3}
192
        cssOverride={{
193
          position: "fixed",
194
          top: 0,
195
          left: 0,
196
          zIndex: 1000,
197
        }}
198
      />
199
      <main>{children}</main>
200
    </>
201
  );
202
}
203
```
204

205
### Content Loading with FadeLoader
206

207
FadeLoader for content areas:
208

209
```typescript
210
<div className="content-area">
211
  {isLoading ? (
212
    <div style={{ textAlign: "center", padding: 40 }}>
213
      <FadeLoader loading={true} color="#6c757d" />
214
      <p style={{ marginTop: 16, color: "#6c757d" }}>
215
        Loading content...
216
      </p>
217
    </div>
218
  ) : (
219
    <div>{content}</div>
220
  )}
221
</div>
222
```
223

224
### Responsive Bar Sizing
225

226
Use viewport units for responsive bars:
227

228
```typescript
229
<BarLoader
230
  loading={true}
231
  width="90vw"
232
  height="0.5vh"
233
  cssOverride={{
234
    maxWidth: "600px",
235
    minHeight: "2px",
236
  }}
237
/>
238
```
239

240
### Custom Animations
241

242
Adjust speed for different contexts:
243

244
```typescript
245
// Slow for heavy operations
246
<BarLoader
247
  loading={isProcessing}
248
  speedMultiplier={0.5}
249
  color="#dc3545"
250
/>
251

252
// Fast for quick operations
253
<FadeLoader
254
  loading={isValidating}
255
  speedMultiplier={2}
256
  color="#28a745"
257
/>
258
```
259

260
### Accessibility
261

262
Include appropriate ARIA attributes:
263

264
```typescript
265
<div role="progressbar" aria-label="Loading content">
266
  <BarLoader
267
    loading={true}
268
    color="#007bff"
269
    width="100%"
270
    aria-hidden="true"
271
  />
272
  <span className="sr-only">Loading, please wait...</span>
273
</div>
274
```