progress

Permission List
Child Component
Attribute
Event
Style
Example Code

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

Permission List

None

Child Component

Not supported

Attribute

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
id	string	-	No	Unique ID of a component.
style	string	-	No	Style declaration of a component.
class	string	-	No	Style class of a component, which is used to refer to a style table.
ref	string	-	No	Used to register reference information of child elements or child components. The reference information is registered with the parent component on $refs.
data	string	-	No	Attribute set for a component to facilitate data storage and reading.

Different types of progress bars support different attributes.

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

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 attributes are supported.

Name

Type

Default Value

Mandatory

Description

clockwise

boolean

true

No

Whether the ring progress bar uses clockwise.
When the type is arc or eclipse⁵⁺, the following attribute is supported.

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.

Event

Name	Parameter	Triggered when
touchstart	TouchEvent	The tapping starts
touchmove	TouchEvent	The tapping moves
touchcancel	TouchEvent	The tapping is interrupted
touchend	TouchEvent	The tapping ends
click	-	A component is clicked
longpress	-	A component is long pressed
swipe⁵⁺	SwipeEvent	A user quickly swipes on a component.

Style

Horizontal progress bar, of which type is horizontal

Name	Type	Default Value	Mandatory	Description
color	<color>	#ff007dff	No	Color of the progress bar
stroke-width	<length>	4px	No	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 (type is circular)

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

Ring or scale-ring progress bar (type is ring or scale-ring)

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. NOTE: The linear gradient color supports only two color attribute 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>	10 px	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

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. NOTE: A larger width value means that the progress bar is closer to the center of the circle. The width is always within the radius range.
start-angle	<deg>	240	No	Start angle of the arc progress bar, which starts from the direction of zero o'clock. The value ranges from 0 to 360 degrees (clockwise).
total-angle	<deg>	240	No	Total length of the arc progress bar. The value ranges from –360 to 360. A negative number indicates anticlockwise.
center-x	<length>	-	No	Center of the arc progress bar (with the upper left corner of this widget as the coordinate origin). This style must be used together with center-y and radius.
center-y	<length>	-	No	Center of the arc progress bar (with the upper left corner of this widget as the coordinate origin). This style must be used together with center-x and radius.
radius	<length>	-	No	Radius of the arc progress bar. This style must be used together with center-x and center-y.

type=eclipse⁵⁺

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.

In addition to the preceding styles, all types of process bars support the following styles.

Name	Type	Default Value	Mandatory	Description
width	<length> \| <percentage>	-	No	Component width. If this attribute is not set, the width required for the element content is used.
height	<length> \| <percentage>	-	No	Component height. If this length attribute is not set, the length required for the element content is used.
padding	<length> \| <percentage>⁵⁺	0	No	Shorthand attribute to set all padding attributes. The attribute can have one to four values: If you set only one value, it specifies the padding for four sides. If you set two values, the first value specifies the top and bottom padding, and the second value specifies the left and right padding. If you set three values, the first value specifies the top padding, the second value specifies the left and right padding, and the third value specifies the bottom padding. If you set four values, they respectively specify the padding for top, right, bottom, and left sides (in clockwise order).
padding-[left\|top\|right\|bottom]	<length> \| <percentage>⁵⁺	0	No	Left, top, right, and bottom padding (in px).
padding-[start\|end]	<length> \| <percentage>⁵⁺	0	No	Start and end padding.
margin	<length> \| <percentage>⁵⁺	0	No	Shorthand attribute to set margins for all sides in a declaration. The attribute can have one to four values: If you set only one value, it specifies the margin for all the four sides. If you set two values, the first value is for the top and bottom sides and the second value for the left and right sides. If you set three values, the first value is for the top, the second value for the left and right, and the third value for the bottom. If you set four values, they are margins for top, right, bottom, and left sides, respectively.
margin-[left\|top\|right\|bottom]	<length> \| <percentage>⁵⁺	0	No	Left, top, right, and bottom margins.
margin-[start\|end]	<length> \| <percentage>⁵⁺	0	No	Start and end margins.
border	-	0	No	Shorthand attribute to set all borders. You can set border-width, border-style, and border-color in sequence. Default values are used for attributes that are not set.
border-style	string	solid	No	Shorthand attribute to set the style for all borders. Available values are as follows: dotted: Dotted border. The radius of a dot is half of border-width. dashed: Dashed border solid: Solid border
border-[left\|top\|right\|bottom]-style	string	solid	No	Styles of the left, top, right, and bottom borders. The available values are dotted, dashed, and solid.
border-[left\|top\|right\|bottom]	-	-	No	Shorthand attribute to set the borders for every side respectively. You can set border-width, border-style, and border-color in sequence. Default values are used for attributes that are not set.
border-width	<length>	0	No	Shorthand attribute to set the width of all borders , or separately set the width of each border.
border-[left\|top\|right\|bottom]-width	<length>	0	No	Attribute to set widths of left, top, right, and bottom borders.
border-color	<color>	black	No	Shorthand attribute to set the color of all borders , or separately set the color of each border.
border-[left\|top\|right\|bottom]-color	<color>	black	No	Attribute to set colors of left, top, right, and bottom borders.
border-radius	<length>	-	No	Attribute to set the radius of round borders of an element. This attribute cannot be used to set the width, color, or style of a specific border. To set the width or color, you need to set border-width, border-color, or border-style for all the borders at the same time.
border-[top\|bottom]-[left\|right]-radius	<length>	-	No	Attribute to receptively set the radii of upper-left, upper-right, lower-right, and lower-left rounded corners
opacity	number	1	No	Transparency of an element. The value ranges from 0 to 1. The value 1 means opaque, and 0 means completely transparent.
display	string	flex	No	How and whether to display the box containing an element. Available values are as follows: flex: flexible layout none: The element is hidden.
visibility	string	visible	No	Whether to display an element. Invisible borders occupy layout space. (To remove the borders, set the display attribute to none.) Available values are as follows: visible: The element is visible. hidden: The element is hidden but still takes up space. NOTE: If both visibility and display are set, only display takes effect.
flex	-	-	No	How to divide available space of the parent component for a child component. You can set one, two⁵⁺, or three⁵⁺ values for this style. Set one value in either of the following ways: A unitless number to set flex-grow. A valid width value⁵⁺ to set flex-basis. Set two values⁵⁺ in the following ways: The first value must be a unitless number used to set flex-grow. The second value must be either of the following: A unitless number to set flex-shrink. A valid width value to set flex-basis. Set three values⁵⁺ in the following ways: The first value must be a unitless number used to set flex-grow. The second value must be a unitless number used to set flex-shrink. The third value must be a valid width value used to set flex-basis. NOTE: This style takes effect only when the container is any of the following components: <div>, <list-item>, <refresh>, <stepper-item>⁵⁺, and <tabs>.
flex-grow	number	0	No	How much a child component will grow. The value specifies allocation of the remaining space on the main axis of the parent component. Size of available space = Container size - Total size of all child components. Value 0 indicates that the child component does not grow. NOTE: This style takes effect only when the container is any of the following components: <div>, <list-item>, <refresh>, <stepper-item>⁵⁺, and <tabs>.
flex-shrink	number	1	No	How much a child component will shrink. The shrink occurs only when the sum of default child component widths is greater than that of the parent component. Value 0 indicates that the child component does not shrink. NOTE: This style takes effect only when the container is any of the following components: <div>, <list-item>, <refresh>, <stepper-item>⁵⁺, and <tabs>.
flex-basis	<length>	-	No	Initial length of the flex item on the main axis. NOTE: This style takes effect only when the container is any of the following components: <div>, <list-item>, <refresh>, <stepper-item>⁵⁺, and <tabs>.
position	string	relative	No	Positioning type of an element. Dynamic changes are not supported. fixed: The element is positioned related to the browser window. absolute: The element is positioned absolutely to its parent element. relative: The element is positioned relative to its normal position. NOTE: The absolute attribute takes effect only when the parent component is <div> or <stack>.
[left\|top \|right\|bottom]	<length>	-	No	left\|top\|right\|bottom must be used together with position to determine the offset position of an element. The left attribute specifies the left edge position of the element. This attribute defines the offset between the left edge of a positioned element and that of a block included in the element. The top attribute specifies the top edge position of the element. This attribute defines the offset between the top edge of a positioned element and that of a block included in the element. The right attribute specifies the right edge position of the element. This attribute defines the offset between the right edge of a positioned element and that of a block included in the element. The bottom attribute specifies the bottom edge position of the element. This attribute defines the offset between the bottom edge of a positioned element and that of a block included in the element.

Example 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>

/* xxx.css */
.container {
  flex-direction: column;
  height: 100%;
  width: 100%;
  align-items: center;
}
.min-progress {
  width: 300px;
  height: 300px;
}