目录

progress

Represents the progress bar.

Since: 1.0.0

Properties

Name

Type

Default Value

Mandatory

Description

percent

number

0

No

Percentage. The value ranges from 0 to 100.

show-info

boolean

false

No

Whether to show the percentage on the right of the progress bar.

border-radius

number/string

0

No

Corner radius.

font-size

number/string

16

No

Font size of the percentage on the right.

stroke-width

number/string

4

No

Stroke width of the progress bar.

color

string

#0A59F7

No

Color of the completed progress bar segment, which is the same as activeColor.

activeColor

string

#0A59F7

No

Color of the completed progress bar segment.

backgroundColor

string

rgba(0,0,0,0.098)

No

Color of the remaining progress bar segment.

active

boolean

false

No

Animation of the progress bar moving from left to right.

active-mode

string

backwards

No
  • backwards: The animation is played from the beginning.
  • forwards: The animation resumes from the last end position.

Since: 1.0.3

duration

number

30

No

Time required for a 1% increase in the progress, in milliseconds.

bindactiveend

eventhandle

-

No

Animation completion event.

Example

<view class="page-section page-section-gap">
  <progress percent="{{20}}" show-info />
  <progress percent="{{20}}" show-info font-size="20px" />
  <progress percent="{{40}}" active />
  <progress percent="{{60}}" stroke-width="{{10}}" />
  <progress percent="{{60}}" stroke-width="{{10}}" border-radius="{{5}}" />
  <progress percent="{{80}}" color="#6abf47" />
  <progress percent="{{80}}" activeColor="#6abf47" />
  <progress percent="{{80}}" backgroundColor="#f4333c" />
</view>