Package:
@react-form-builder/components-rsuite
· Source
code
Introduction
The Progress Line component represents the progress or completion
of a task or process in a linear format. It is commonly used to show the progress of file downloads, form completion, or any other task that
involves a sequential or incremental process. This component is included within the following NPM
package: @react-form-builder/components-rsuite.
In general, this component displays a horizontal line with a customizable color and length, along with a percentage or label indicating the
progress value. It allows customizing the appearance of the progress bar, including the color, size, behavior, and more. All available
properties and options of this component is presented below.
Main properties
The following general properties are available within the Main tab:
| Name | Type | Description |
|---|
| Class Prefix | string | The prefix for the CSS class names of the progress line |
| Percent | number | The presented percentage value of the progress line |
| Show Info | boolean | If set to true, the progress line will display the percentage value |
| Status | choice | The status and the color of the progress line (i.e., success, active, or fail) |
| Stroke Color | color | Sets the custom color of the progress line’s stroke |
| Stroke Width | number | The width of the progress line’s stroke |
| Vertical | boolean | If set to true, the progress line will be displayed vertically |
Style properties
These are properties that allow to customize the size, color and other style properties of your component:
-
For Device: You can provide component’s style customization for all devices or specific
devices by using this dropdown list. Refer to Adaptive Layout for more
details.
-
Component > Class Name: Add a class name for your component for the subsequent styling if necessary.
-
Wrapper: The options below enable you to tailor the appearance of your component and customize
it for a specific device type, as selected in the For Device property:
| Name | Type | Description |
|---|
| Width | number | Specifies the width for your component |
| Height | number | Specifies the height for your component |
| Margin top/right/bottom/left | number | Margin values for you component |
| Color | string | Allows customizing the text color |
| Background color | string | Enables customizing the background color |
Last modified on April 16, 2026
