0
# Style Customization
1

2
The buildStyles utility function provides a convenient way to generate comprehensive style objects with common customization options like colors, transitions, and rotations.
3

4
## Capabilities
5

6
### buildStyles Function
7

8
Utility function for generating styles object with common progressbar customization options.
9

10
```typescript { .api }
11
/**
12
 * Generate styles object for progressbar customization
13
 * @param options - Style customization options
14
 * @returns CircularProgressbarStyles object for use with styles prop
15
 */
16
function buildStyles(options: {
17
  /** Number of turns for rotation (0-1). 0.25 = quarter turn, 0.5 = half turn */
18
  rotation?: number;
19
  /** Stroke line cap style ('butt' | 'round' | 'square') */
20
  strokeLinecap?: any;
21
  /** Color for text element */
22
  textColor?: string;
23
  /** Size for text element (CSS font-size value) */
24
  textSize?: string | number;
25
  /** Color for progress path */
26
  pathColor?: string;
27
  /** CSS transition property for path animations */
28
  pathTransition?: string;
29
  /** Duration in seconds for path transitions */
30
  pathTransitionDuration?: number;
31
  /** Color for background trail */
32
  trailColor?: string;
33
  /** Color for background circle */
34
  backgroundColor?: string;
35
}): CircularProgressbarStyles;
36

37
interface CircularProgressbarStyles {
38
  /** Styles for root SVG element */
39
  root?: React.CSSProperties;
40
  /** Styles for background trail path */
41
  trail?: React.CSSProperties;
42
  /** Styles for progress path */
43
  path?: React.CSSProperties;
44
  /** Styles for text element */
45
  text?: React.CSSProperties;
46
  /** Styles for background circle */
47
  background?: React.CSSProperties;
48
}
49
```
50

51
**Usage Examples:**
52

53
```tsx
54
import React from 'react';
55
import { CircularProgressbar, buildStyles } from 'react-circular-progressbar';
56
import 'react-circular-progressbar/dist/styles.css';
57

58
// Basic color customization
59
function CustomColors() {
60
  return (
61
    <div style={{ width: 150, height: 150 }}>
62
      <CircularProgressbar
63
        value={75}
64
        text="75%"
65
        styles={buildStyles({
66
          pathColor: '#f88',
67
          textColor: '#f88',
68
          trailColor: '#d6d6d6'
69
        })}
70
      />
71
    </div>
72
  );
73
}
74

75
// With rotation and rounded caps
76
function RotatedProgress() {
77
  return (
78
    <div style={{ width: 200, height: 200 }}>
79
      <CircularProgressbar
80
        value={60}
81
        text="60%"
82
        styles={buildStyles({
83
          rotation: 0.25, // Quarter turn (start from top)
84
          strokeLinecap: 'round',
85
          pathColor: '#3e98c7',
86
          trailColor: '#d6d6d6',
87
          textColor: '#3e98c7'
88
        })}
89
      />
90
    </div>
91
  );
92
}
93

94
// Animated progress with transition
95
function AnimatedProgress() {
96
  const [value, setValue] = React.useState(0);
97
  
98
  React.useEffect(() => {
99
    const timer = setInterval(() => {
100
      setValue(v => (v >= 100 ? 0 : v + 10));
101
    }, 500);
102
    return () => clearInterval(timer);
103
  }, []);
104
  
105
  return (
106
    <div style={{ width: 180, height: 180 }}>
107
      <CircularProgressbar
108
        value={value}
109
        text={`${value}%`}
110
        styles={buildStyles({
111
          pathTransition: 'stroke-dashoffset 0.5s ease 0s',
112
          pathColor: '#00d4aa',
113
          trailColor: '#d6d6d6',
114
          textColor: '#00d4aa'
115
        })}
116
      />
117
    </div>
118
  );
119
}
120

121
// Custom text size and background
122
function CustomStyling() {
123
  return (
124
    <div style={{ width: 220, height: 220 }}>
125
      <CircularProgressbar
126
        value={88}
127
        text="88%"
128
        background={true}
129
        styles={buildStyles({
130
          pathColor: '#ff6b6b',
131
          textColor: '#ff6b6b',
132
          trailColor: 'transparent',
133
          backgroundColor: '#f8f9fa',
134
          textSize: '24px'
135
        })}
136
      />
137
    </div>
138
  );
139
}
140
```
141

142
### Color Customization
143

144
Control colors for all visual elements of the progressbar.
145

146
```typescript { .api }
147
/**
148
 * Color customization options
149
 */
150
interface ColorOptions {
151
  /** Color for the progress path (e.g., '#3e98c7', 'rgb(62, 152, 199)', 'blue') */
152
  pathColor?: string;
153
  /** Color for the background trail (e.g., '#d6d6d6', 'rgba(0,0,0,0.1)') */
154
  trailColor?: string;
155
  /** Color for the text element (e.g., '#333', 'currentColor') */
156
  textColor?: string;
157
  /** Color for the background circle when background prop is true */
158
  backgroundColor?: string;
159
}
160
```
161

162
**Color Examples:**
163

164
```tsx
165
// Gradient-like effect using multiple components
166
function GradientEffect() {
167
  return (
168
    <div style={{ width: 160, height: 160, position: 'relative' }}>
169
      {/* Background layer */}
170
      <CircularProgressbar
171
        value={100}
172
        styles={buildStyles({
173
          pathColor: '#e3f2fd',
174
          trailColor: 'transparent'
175
        })}
176
      />
177
      {/* Foreground layer */}
178
      <div style={{ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%' }}>
179
        <CircularProgressbar
180
          value={70}
181
          text="70%"
182
          styles={buildStyles({
183
            pathColor: '#2196f3',
184
            trailColor: 'transparent',
185
            textColor: '#2196f3'
186
          })}
187
        />
188
      </div>
189
    </div>
190
  );
191
}
192

193
// Theme-based colors
194
function ThemedColors() {
195
  const theme = {
196
    success: '#4caf50',
197
    warning: '#ff9800',
198
    error: '#f44336',
199
    info: '#2196f3'
200
  };
201
  
202
  return (
203
    <div style={{ display: 'flex', gap: '20px' }}>
204
      {Object.entries(theme).map(([type, color]) => (
205
        <div key={type} style={{ width: 100, height: 100 }}>
206
          <CircularProgressbar
207
            value={75}
208
            text={type}
209
            styles={buildStyles({
210
              pathColor: color,
211
              textColor: color,
212
              trailColor: '#f0f0f0',
213
              textSize: '12px'
214
            })}
215
          />
216
        </div>
217
      ))}
218
    </div>
219
  );
220
}
221
```
222

223
### Animation and Transitions
224

225
Control animations and transitions for smooth visual effects.
226

227
```typescript { .api }
228
/**
229
 * Animation and transition options
230
 */
231
interface AnimationOptions {
232
  /** CSS transition property for path element (e.g., 'stroke-dashoffset 0.5s ease') */
233
  pathTransition?: string;
234
  /** Duration in seconds for path transitions (generates transition-duration CSS) */
235
  pathTransitionDuration?: number;
236
}
237
```
238

239
**Animation Examples:**
240

241
```tsx
242
// Easing variations
243
function EasingExamples() {
244
  const easings = [
245
    'ease',
246
    'ease-in',
247
    'ease-out',
248
    'ease-in-out',
249
    'cubic-bezier(0.4, 0, 0.2, 1)'
250
  ];
251
  
252
  return (
253
    <div style={{ display: 'flex', gap: '15px' }}>
254
      {easings.map((easing, index) => (
255
        <div key={easing} style={{ width: 80, height: 80 }}>
256
          <CircularProgressbar
257
            value={(index + 1) * 20}
258
            styles={buildStyles({
259
              pathTransition: `stroke-dashoffset 1s ${easing}`,
260
              pathColor: '#9c27b0'
261
            })}
262
          />
263
        </div>
264
      ))}
265
    </div>
266
  );
267
}
268

269
// Delayed transitions
270
function DelayedTransitions() {
271
  const [trigger, setTrigger] = React.useState(false);
272
  
273
  return (
274
    <div>
275
      <button onClick={() => setTrigger(!trigger)}>
276
        Toggle Progress
277
      </button>
278
      <div style={{ width: 200, height: 200, marginTop: 20 }}>
279
        <CircularProgressbar
280
          value={trigger ? 90 : 10}
281
          text={`${trigger ? 90 : 10}%`}
282
          styles={buildStyles({
283
            pathTransition: 'stroke-dashoffset 2s ease-in-out 0.5s', // 0.5s delay
284
            pathColor: '#ff5722',
285
            textColor: '#ff5722'
286
          })}
287
        />
288
      </div>
289
    </div>
290
  );
291
}
292
```
293

294
### Typography and Rotation
295

296
Customize text appearance and progressbar orientation.
297

298
```typescript { .api }
299
/**
300
 * Typography and rotation options
301
 */
302
interface TypographyRotationOptions {
303
  /** Text size using any CSS font-size value */
304
  textSize?: string | number;
305
  /** Number of turns for rotation (0-1 range) */
306
  rotation?: number;
307
  /** Stroke line cap style for path ends */
308
  strokeLinecap?: any;
309
}
310
```
311

312
**Typography and Rotation Examples:**
313

314
```tsx
315
// Text size variations
316
function TextSizes() {
317
  const sizes = ['12px', '16px', '20px', '1.5em', '2rem'];
318
  
319
  return (
320
    <div style={{ display: 'flex', gap: '20px', alignItems: 'center' }}>
321
      {sizes.map(size => (
322
        <div key={size} style={{ width: 100, height: 100 }}>
323
          <CircularProgressbar
324
            value={50}
325
            text="50%"
326
            styles={buildStyles({
327
              textSize: size,
328
              pathColor: '#795548',
329
              textColor: '#795548'
330
            })}
331
          />
332
          <div style={{ textAlign: 'center', fontSize: '12px', marginTop: '5px' }}>
333
            {size}
334
          </div>
335
        </div>
336
      ))}
337
    </div>
338
  );
339
}
340

341
// Rotation variations
342
function RotationVariations() {
343
  const rotations = [0, 0.125, 0.25, 0.375, 0.5];
344
  
345
  return (
346
    <div style={{ display: 'flex', gap: '20px' }}>
347
      {rotations.map(rotation => (
348
        <div key={rotation} style={{ width: 100, height: 100 }}>
349
          <CircularProgressbar
350
            value={75}
351
            text={`${rotation * 360}°`}
352
            styles={buildStyles({
353
              rotation,
354
              strokeLinecap: 'round',
355
              pathColor: '#607d8b',
356
              textColor: '#607d8b',
357
              textSize: '12px'
358
            })}
359
          />
360
        </div>
361
      ))}
362
    </div>
363
  );
364
}
365

366
// Combined styling
367
function AdvancedStyling() {
368
  return (
369
    <div style={{ width: 250, height: 250 }}>
370
      <CircularProgressbar
371
        value={82}
372
        text="82%"
373
        styles={buildStyles({
374
          rotation: 0.25,
375
          strokeLinecap: 'round',
376
          textSize: '28px',
377
          pathTransitionDuration: 0.75,
378
          pathColor: `url(#gradient)`,
379
          textColor: '#1976d2',
380
          trailColor: '#e1f5fe'
381
        })}
382
      />
383
    </div>
384
  );
385
}
386
```