All Products
Document Center


Last Updated: Feb 04, 2021

The progress bar component.

Attribute Type Default value Description Minimum version
percent Float - A percentage between 0 and 100. -
show-info Boolean false The percentage value appears on the right. -
stroke-width Number 6 The thickness of the line in pixels. -
active-color Color #09BB07 The selected progress bar color. -
background-color Color - The unselected progress bar color. -
active Boolean false Whether to load the animation from left to right. -



Code sample

  1. <progress percent="20" show-info/>
  2. <progress percent="40" active/>
  3. <progress percent="60" stroke-width="10"/>
  4. <progress percent="80" active/>
  5. <progress percent="80" color="#10AEFF"/>