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.