# Progress The **** component is used to provide a progress bar that displays the progress of content loading or an operation. ## Applicable Devices

Phone	Tablet	Head Unit	Smart TV	Wearable
Yes	Yes	Yes	No	No

## Child Components None ## APIs Progress\(value: \{value: number, total?: number, style?: ProgressStyle\}\) Creates a progress bar with a clear progress. - Parameters

Name	Type	Mandatory	Default Value	Description
value	number	Yes	-	Current progress.
total	number	No	100	Total progress.
style	ProgressStyle	No	Linear	Style of the progress bar.

- ProgressStyle enums

Name	Description
Linear	Linear progress bar.

## Attributes

Name	Type	Default Value	Description
value	number	-	Current progress.
color	Color	-	Background color of the progress bar.

## Example ``` @Entry @Component struct ProgressExample { build() { Column({ space: 5 }) { Text('Linear Progress').fontSize(9).fontColor(0xCCCCCC).width('90%') Progress({ value: 10, style: ProgressStyle.Linear }).width(200) Text('Linear Progress Color').fontSize(9).fontColor(0xCCCCCC).width('90%') Progress({ value: 20, total: 150, style: ProgressStyle.Linear }).color(Color.Red).value(50).width(200) }.width('100%').margin({ top: 5 }) } } ``` ![](figures/progress-60.png)