Progress Bar

The <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`

Example#

Usage#

Properties#

Example

Usage

Properties