progress-Basic Components-JavaScript-compatible Web-like Development Paradigm (ArkUI.Full)-JavaScript Components-ArkUI-Application Framework

NOTE

Supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version.

The progress component is used to provide a progress bar that displays the progress of content loading or an operation.

Required Permissions

None

Child Components

Not supported

Attributes

In addition to the universal attributes, the following attributes are supported.

Expand

Name	Type	Default Value	Mandatory	Description
type	string	horizontal	No	Type of the progress bar, which cannot be changed dynamically. Available values are as follows: - horizontal: linear progress bar. - circular: loading progress bar. - ring: ring progress bar. - scale-ring: ring progress bar with a scale. - arc: arc progress bar. - eclipse⁵⁺: eclipse progress bar, which displays the progress in a way similar to the waxing and waning of the moon.

Name

Type

Default Value

Mandatory

Description

type

string

horizontal

Type of the progress bar, which cannot be changed dynamically. Available values are as follows:

- horizontal: linear progress bar.

- circular: loading progress bar.

- ring: ring progress bar.

- scale-ring: ring progress bar with a scale.

- arc: arc progress bar.

- eclipse⁵⁺: eclipse progress bar, which displays the progress in a way similar to the waxing and waning of the moon.

Different types of progress bars support different attributes.

When the type is horizontal, ring, or scale-ring, the following attributes are supported.

Expand

Name	Type	Default Value	Mandatory	Description
percent	number	0	No	Current progress. The value ranges from 0 to 100.
secondarypercent	number	0	No	Secondary progress. The value ranges from 0 to 100.

When the type is ring or scale-ring, the following attribute is supported.

Expand
Name Type Default Value Mandatory Description

clockwise boolean true No
Whether the ring progress bar uses clockwise.

Default value: true, indicating that the ring progress bar uses clockwise.
When the type is arc or eclipse⁵⁺, the following attribute is supported.

Expand
Name Type Default Value Mandatory Description

percent number 0 No Current progress. The value ranges from 0 to 100.

Name	Type	Default Value	Mandatory	Description
clockwise	boolean	true	No	Whether the ring progress bar uses clockwise. Default value: true, indicating that the ring progress bar uses clockwise.

Styles

In addition to the universal styles, the following styles are supported.

Horizontal progress bar, of which type is horizontal

Expand

Name	Type	Default Value	Mandatory	Description
color	<color>	#ff007dff	No	Color of the progress bar.
stroke-width	<length>	4px	No	Stroke width of the progress bar.
background-color	<color>	-	No	Background color of the progress bar.
secondary-color	<color>	-	No	Color of the secondary progress bar.

Circular progress bar, of which type is circular

Expand

Name	Type	Default Value	Mandatory	Description
color	<color>	-	No	Color of the dot on the loading progress bar.

Ring or scale-ring progress bar, of which type is ring or scale-ring

Expand

Name	Type	Default Value	Mandatory	Description
color	<color> \| <linear-gradient>	-	No	Color of the ring progress bar. The ring type supports the linear gradient color. The linear gradient color supports only two color parameter formats, for example, color = linear-gradient(#ff0000, #00ff00).
background-color	<color>	-	No	Background color of the ring progress bar.
secondary-color	<color>	-	No	Color of the secondary ring progress bar.
stroke-width	<length>	10px	No	Width of the ring progress bar.
scale-width	<length>	-	No	Scale thickness of the ring progress bar with a scale. This style takes effect only when the type is scale-ring.
scale-number	number	120	No	Number of scales of the ring progress bar with a scale. This style takes effect only when the type is scale-ring.

Arc progress bar, of which type is arc

Expand

Name	Type	Default Value	Mandatory	Description
color	<color>	-	No	Color of the arc progress bar.
background-color	<color>	-	No	Background color of the arc progress bar.
stroke-width	<length>	4px	No	Width of the arc progress bar, which is always within the radius area. A larger width value means that the progress bar is closer to the center of the circle.
start-angle	<deg>	240	No	Start angle of the arc progress bar, which starts from zero o'clock clockwise. The value ranges from 0 to 360 degrees.
total-angle	<deg>	240	No	Total angle of the arc progress bar. The value ranges from –360 to 360. A negative number indicates the anticlockwise direction from the start point to the end point.
center-x	<length>	Half of the width of the arc progress bar	No	Center of the arc progress bar (with the upper left corner of this component as the coordinate origin). This attribute must be used together with center-y and radius.
center-y	<length>	Half of the height of the arc progress bar	No	Center of the arc progress bar (with the upper left corner of this component as the coordinate origin). This attribute must be used together with center-x and radius.
radius	<length>	Half of the minimum width and height of the arc progress bar	No	Radius of the arc progress bar. This attribute must be used together with center-x and center-y.

Eclipse progress bar, of which type is eclipse⁵⁺

Expand

Name	Type	Default Value	Mandatory	Description
color	<color>	-	No	Color of the eclipse progress bar.
background-color	<color>	-	No	Background color of the eclipse progress bar.

Events

The universal events are supported.

Methods

The universal methods are supported.

Example

Collapse
Word wrap
Dark theme
Copy code
<!--xxx.hml -->
<div class="container">
  <progress class="min-progress" type="scale-ring"  percent= "10" secondarypercent="50"></progress>
  <progress class="min-progress" type="horizontal" percent= "10" secondarypercent="50"></progress>
  <progress class="min-progress" type="arc" percent= "10"></progress>
  <progress class="min-progress" type="ring" percent= "10" secondarypercent="50"></progress>
</div>

Collapse
Word wrap
Dark theme
Copy code
/* xxx.css */
.container {
  flex-direction: column;
  height: 100%;
  width: 100%;
  align-items: center;
}
.min-progress {
  width: 300px;
  height: 300px;
}