# Multi-Size Circular Progress Components

Progress indicators in small, normal, and large sizes. Easily update with dynamic values.

## Small Size

0%
Initializing...
0%
Initializing...

## Normal Size

0%
Initializing...
0%
Initializing...

## Large Size

0%
Initializing...
0%
Initializing...

## How to Use These Progress Components

You can update any progress indicator using the `circleProgress()` function:

// Update small progress indicator
circleProgress('progressAvatarSmall1', 75, 'Project status', {
circleId: 'progressCircleSmall1',
percentId: 'progressPercentSmall1',
statusId: 'progressStatusSmall1',
color: '#4CAF50'
});
// Update normal progress indicator
circleProgress('progressAvatarNormal1', 50, 'Team performance', {
circleId: 'progressCircleNormal1',
percentId: 'progressPercentNormal1',
statusId: 'progressStatusNormal1',
color: '#2196F3'
});
// Update large progress indicator
circleProgress('progressAvatarLarge1', 25, 'Budget usage', {
circleId: 'progressCircleLarge1',
percentId: 'progressPercentLarge1',
statusId: 'progressStatusLarge1',
color: '#FF9800'
});

All parameters except the first three are optional. The function will automatically detect the size based on the CSS classes.