Guide for implementing and customizing the Syncfusion Progress Bar component in ASP.NET Core applications. Use this skill when the user needs to create progress indicators showing task completion, file upload/download status, data loading states, circular progress visualizations, segmented progress tracking, or animated progress bars. Essential for building user-friendly feedback mechanisms that clearly communicate progress to end users.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
A direct command skips the review prompt. Inspect the source before running it.
Guide for implementing and customizing the Syncfusion Progress Bar component in ASP.NET Core applications. Use this skill when the user needs to create progress indicators showing task completion, file upload/download status, data loading states, circular progress visualizations, segmented progress tracking, or animated progress bars. Essential for building user-friendly feedback mechanisms that clearly communicate progress to end users.
metadata
{"author":"Syncfusion Inc","version":"34.1.29"}
Implementing Syncfusion Progress Bar
The Syncfusion Progress Bar component is a customizable control that visualizes the progress of a task with multiple shape options, animation support, and interactive features. It's ideal for displaying file uploads, downloads, data processing, and any scenario requiring clear visual feedback to users about task completion status.
When to Use This Skill
Use this skill when you need to:
Display linear or circular progress indicators
Show task completion percentages with visual feedback
Implement file upload/download progress tracking
Create loading states with determinate or indeterminate modes
Add secondary progress indicators for buffered operations
Animate progress transitions smoothly
Display progress annotations and labels
Make progress bars accessible with WCAG compliance
Add tooltips showing progress information
Customize appearance with colors, thickness, and styling
Divides the progress bar into 5 segments, useful for multi-step processes.
Key Properties
Property
Type
Default
Purpose
type
string
"Linear"
Shape of the progress bar: Linear, Circular, SemiCircular
value
number
0
Current progress value
minimum
number
0
Minimum range value
maximum
number
100
Maximum range value
isIndeterminate
boolean
false
Show indeterminate loading state
segmentCount
number
1
Divide progress bar into segments
showProgressValue
boolean
false
Display percentage label
trackThickness
number
0
Track bar thickness in pixels
progressThickness
number
0
Progress bar thickness in pixels
cornerRadius
string
"Auto"
Corner radius styling
secondaryProgress
number
NaN
Secondary progress value for buffer mode
trackColor
string
null
Track (background) color
progressColor
string
null
Primary progress fill color
secondaryProgressColor
string
""
Secondary/buffer progress color
Key Events
Event
Trigger
Use Case
ValueChanged
When progress value changes
Update UI, track progress milestones
ProgressCompleted
When value reaches maximum
Trigger next action, show completion message
For detailed implementation guidance, refer to the reference files above. Each provides specific instructions, code examples, and best practices for its topic area.
