Progress

A component for displaying the progress status of an operation.

Progress Line

A standard progress bar.

 30% 
 50% 
<prism-progress [percent]="30"></prism-progress>
<prism-progress [percent]="50" status="active"></prism-progress>
<prism-progress [percent]="70" status="exception"></prism-progress>
<prism-progress [percent]="100"></prism-progress>

Progress Circle

A circular progress bar.

 30% 
<prism-progress type="circle" [percent]="30" [width]="80"></prism-progress>
<prism-progress type="circle" [percent]="70" status="exception" [width]="80"></prism-progress>
<prism-progress type="circle" [percent]="100" [width]="80"></prism-progress>

Dynamic Demo

Interact with buttons to change the progress percentage.

 30% 
 30% 
<prism-progress [percent]="percent()"></prism-progress>
<prism-progress type="circle" [percent]="percent()"></prism-progress>
<div class="flex gap-2 mt-4">
  <prism-button (click)="decrease()">-</prism-button>
  <prism-button (click)="increase()">+</prism-button>
</div>

APINameTypeDefaultDescription
percentnumber0Current percentage (0-100), two-way bindable
type'line' | 'circle''line'Type of progress
status'normal' | 'active' | 'success' | 'exception''normal'Status of progress
strokeWidthnumber6Width of the progress stroke
showInfobooleantrueWhether to show percentage text or icons
widthnumber120Width of the circle canvas in px (only for type="circle")

Name	Type	Default	Description
`percent`	`number`	`0`	Current percentage (0-100), two-way bindable
`type`	`'line' \| 'circle'`	`'line'`	Type of progress
`status`	`'normal' \| 'active' \| 'success' \| 'exception'`	`'normal'`	Status of progress
`strokeWidth`	`number`	`6`	Width of the progress stroke
`showInfo`	`boolean`	`true`	Whether to show percentage text or icons
`width`	`number`	`120`	Width of the circle canvas in px (only for type="circle")