Progress Bar
<salla-progress-bar> web component is used to convey data visually to users. It is also designed to help users quickly interpret numerical data at a glance, and can be customized according to the color and unit of the bar, as well as the unit, value, and textual representation.Example
Usage
HTML
SASS
Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
| Color | color | Progress bar color. | string | salla.config.get('theme.color.primary', "#ffd5c4") |
| Donation | donation | Pass the Donation object as a JSON string in the following format: {"target_message":null,"target_date":"2023-04-18","target_end_date":"2023-04-18","target_amount":400,"collected_amount":380,"can_donate":true} | Donation | string | undefined |
| Header | header | Header Title that appears before the progress bar. | string | undefined |
| Height | height | Sets the height for the wrapper. | string | "10px" |
| Message | message | Subtitle text that comes under the progress bar or instead of it if the target is not set. | string | undefined |
| Stripped | stripped | A stripped effect for the progress bar. | boolean | undefined |
| Target | target | Progress bar's goal. | number | undefined |
| Unit | unit | The unite to be added after the numbers. | string | salla.config.currency().symbol |
| Value | value | The progress so far as of the goal. | number | undefined |
Modified at 2026-07-09 11:27:26