ProgressBar
A horizontal progress bar widget for visualizing completion or loading state. It displays a colored bar whose width represents the current value, with optional label text on the left and a valueText on the right. The value can be specified as a fraction (0–1) or as an absolute number when a max is provided. Customize the appearance with the color config and the displayed text with a valueRenderer.
const progressBar = new ProgressBar({
label : 'Upload',
value : 0,
max : 100,
color : 'b-green',
appendTo : document.body
});
// Update progress
progressBar.value = 45;
Useful configs and properties
| Config | Description |
|---|---|
| value | Current progress value (0–1 fractional, or absolute when max is set) |
| max | Maximum value; when set, value is treated as absolute |
| label | Text label displayed at the top left |
| valueText | Text displayed at the top right (auto-generated as "value/max" if omitted) |
| valueRenderer | Custom function to format the displayed value text |
| color | Bar color CSS class (e.g. 'b-green', 'b-orange') |
See also
- Mask - An alternative way to show progress with a loading mask overlay
Configs
Configs are options you supply in a configuration object when creating an instance of this class-
Color of the progress bar ('b-green', 'b-yellow', 'b-orange', etc.)
Has a corresponding runtime color property.
-
The label text to display at the top left
Has a corresponding runtime label property.
-
Maximum value for progress calculation. When specified, value is treated as absolute.
Has a corresponding runtime max property.
-
Progress value. If max is specified, this is an absolute value (e.g., 8 out of 10). If max is not specified, this should be between 0 and 1 (e.g., 0.5 for 50%)
Has a corresponding runtime value property.
-
The value text to display at the top right If not specified and max is provided, will auto-generate as "value/max"
Has a corresponding runtime valueText property.
Properties
Properties are getters/setters or publicly accessible variables on this class-
Identifies an object as an instance of ProgressBar class, or subclass thereof.
-
Color of the progress bar ('b-green', 'b-yellow', 'b-orange', etc.)
Has a corresponding color config.
-
The label text to display at the top left
Has a corresponding label config.
-
Maximum value for progress calculation. When specified, value is treated as absolute.
Has a corresponding max config.
-
Progress value. If max is specified, this is an absolute value (e.g., 8 out of 10). If max is not specified, this should be between 0 and 1 (e.g., 0.5 for 50%)
Has a corresponding value config.
-
Template function that can be used to customize the displayed value
Has a corresponding valueRenderer config.
-
The value text to display at the top right If not specified and max is provided, will auto-generate as "value/max"
Has a corresponding valueText config.
-
Identifies an object as an instance of ProgressBar class, or subclass thereof.
CSS variables
CSS variables that can be set to adjust appearance| Name | Description |
|---|---|
| --b-progress-bar-background | The progress bar background |