Skip to main content
Supported Regions:上海

Progress Bar

WdProgress

Applicable Scenarios​

A progress bar that indicates the current progress, such as file upload progress, audio playback progress, etc.

Extended Scenarios Description​

Step Size​

Example

Configure a progress bar with a step size of 20.

Configuration Method

In the Scoring Attributes Area - Basic Properties - Numerical Adjustment Step Size, enter 20 as the target step size. Then click the progress bar in the editor area to verify.

Example​

Interactive Preview​

Clickable and Draggable Progress Bar​

Properties​

External properties received by the component

Property Name
Property Identifier
Type
Description
Display progress percentageshowPercentboolean
Minimum valueminnumber0
Maximum valuemaxnumber

Default value: 100

Adjust step sizestepnumber

Control the value to add/decrease with each click of the adjust button

Default value: 1

Display HeadlineslabelVisibleboolean

Default value: true

Title alignmentlabelAlignstring

In the scenario, the form by default follows the title alignment configuration of the form container.

Line break in headinglabelWrapboolean

If the title content is too long when closed, show one line with overflow omitted; when enabled, show with line breaks. In form scenarios, it follows the form container's title line break configuration by default.

Title positionlayoutstring

Set title display position in form component. In the scenario, it follows the title position configuration of the form container by default.

Title widthlabelWidthstring

You can enter a value with units such as px or %, for example: 200px.

In the scenario, the form follows the title width configuration of the form container by default.

Heading NotelabelTipsstring

Take effect on PC/H5

Configure tooltip content for the heading

Requiredrequiredboolean

Enable required for this component, value cannot be empty

Required identifierrequiredFlagboolean

Enabled, the component will display a required asterisk tag if mandatory.

Default value: true

Required validation noterequiredMsgstring

Enable required, prompting message when component value is empty

Default value: "该项为必填项"

Status.statusstring

Default value: "edit"

Bound fieldnamestring

The Key of the form field is used to match the field identifier of the data model when submitting data. Ensure uniqueness inline.

Title content.labelstring

Example: "标题"

progress valuevaluenumber

Events​

Events exposed by the component. You can listen to component events to trigger external actions

Event Name
Event Code
Event Output Parameters event.detail
Applicable Scenarios
Description
value changechangeobject
  • value: number进度值
Compatible with all platforms

-

Property API​

Through the Property API, you can access the internal state and property values of components. You can access internal values using$w.componentId.propertyName, such as $w.input1.value. For details, please refer to Property API

Read-only Property Name
Property Identifier
Type
Description
Bound fieldnamestring

The Key of the form field is used to match the field identifier of the data model when submitting data. Ensure uniqueness inline.

Title content.labelstring
Display progress percentageshowPercentboolean
Minimum valueminnumber
Maximum valuemaxnumber
progress valuevaluenumber
Adjust step sizestepnumber

Control the value to add/decrease with each click of the adjust button

Indicates whether to displayvisibleboolean

Whether to display the component

Whether to disabledisabledboolean

Component Disabled

Specify whether it is read-only or not.readOnlyboolean

Whether the component is read-only

Style API​

Through the Style API, you can override the styles of internal elements in components to achieve customization. For example, in the low-code editor, you can write styles for all button components using #wd-page-root .wd-btn, and control individual component styles with :scope. For detailed instructions, please refer toStyle API

Name
Class Name
Description and Examples
root element.wd-progress-rootOutermost component element
/* :scope refers to the current component element */
/* For details, refer to the Style API documentation */
:scope.wd-progress-root {
  /* Write CSS styles here */
}
PC-side root element.wd-pc-progress-rootSettable root element style for the PC side
/* :scope refers to the current component element */
/* For details, refer to the Style API documentation */
:scope.wd-pc-progress-root {
  /* Write CSS styles here */
}
H5 root element.wd-h5-progress-rootSettable root element style for the H5 side
/* :scope refers to the current component element */
/* For details, refer to the Style API documentation */
:scope.wd-h5-progress-root {
  /* Write CSS styles here */
}
Mini program root element.wd-mp-progress-rootSettable root element style for mini program
/* :scope refers to the current component element */
/* For details, refer to the Style API documentation */
:scope.wd-mp-progress-root {
  /* Write CSS styles here */
}
Component title style.wd-progress-root .wd-form-item-wrap__labelComponent title element

:scope .wd-form-item-wrap__label {
  font-size: 20px;
  color: gray;
  padding: 0;
  display: flex;
  align-items: center;
}
Progress bar container element.wd-progress-containerCan write styles for the progress bar container
/* :scope refers to the current component element */
/* For details, refer to the Style API documentation */
:scope .wd-progress-container {
  /* Write CSS styles here */
}
Progress bar track element.wd-progressWrite styles for the progress bar track

:scope .wd-progress {
  background-color: green;
}
progress bar progress element.wd-progress__valueCan write styles for the element representing the progress bar's current progress

/* 进度条颜色 */
:scope .wd-progress__value {
  background-color: red;
}
/* 进度条高度 */
:scope .wd-progress__value {
  height: 20px;
}
/* 进度条圆角大小 */
:scope .wd-progress__value {
  border-radius: 5px;
}
:scope .wd-progress {
  border-radius: 5px;
}

Learn about Style API