# salla-progress-bar (https://docs.salla.dev/twilight/react/web-components/salla-progress-bar)



{/* Generated by scripts/sync-web-components.mjs from the components docs.json. Do not edit by hand. */}

A horizontal progress bar with optional header, value/target labels and a message, mainly used to show
how much of a target (for example a donation goal) has been reached.
It renders nothing when neither `target` nor `message` is set.

## Use it [#use-it]

In HTML or JSX, use the tag `<salla-progress-bar>` with the **Attribute** names below. In React, the wrapper takes the **Property** names (camelCase).

```tsx
import { SallaProgressBar } from '@salla.sa/twilight-components-react/progress-bar';
```

## Try it [#try-it]

<Demo name="web-components/salla-progress-bar" />

## Example [#example]

```tsx
import { SallaProgressBar } from '@salla.sa/twilight-components-react/progress-bar';

export function Example() {
  return (
    <SallaProgressBar header="Donation goal" value={380} target={400} unit="SAR" height="12px" />
  );
}
```

```html
<salla-progress-bar header="Donation goal" value="380" target="400" unit="SAR" height="12px"></salla-progress-bar>
```

## Properties [#properties]

| Property    | Attribute    | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | Type                 | Default  |
| ----------- | ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------- | -------- |
| `color`     | `color`      | Fill color of the bar as any CSS color, defaults to: `salla.config.get('theme.color.primary', "#ffd5c4")`                                                                                                                                                                                                                                                                                                                                                                                                                                  | `string`             |          |
| `donation`  | `donation`   | A product donation as an object or a JSON string. When `can_donate` is true and `target_amount` is set, it fills `value` (from `collected_amount`), `target` (from `target_amount`), `header` and `message` (from `target_end_date`). Otherwise it only sets `message` from `target_message`. It is read once when the element is created, so set it before the element renders. Example: `{"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` |          |
| `header`    | `header`     | Title shown above the progress bar.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | `string`             |          |
| `height`    | `height`     | Height of the bar as a CSS length, for example `10px`. Defaults to `10px`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | `string`             | `"10px"` |
| `hideUnits` | `hide-units` | Hides the value and target labels shown above the bar. Only has an effect when `target` is set.                                                                                                                                                                                                                                                                                                                                                                                                                                            | `boolean`            |          |
| `message`   | `message`    | Text shown under the progress bar, or on its own when `target` is not set.                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | `string`             |          |
| `stripped`  | `stripped`   | Adds a striped effect to the filled part of the bar.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | `boolean`            |          |
| `target`    | `target`     | The goal of the progress bar, in the same unit as `value`. The bar is hidden when it is not set.                                                                                                                                                                                                                                                                                                                                                                                                                                           | `number`             |          |
| `unit`      | `unit`       | Text added after the value and target numbers, defaults to: `salla.config.currency().symbol`                                                                                                                                                                                                                                                                                                                                                                                                                                               | `string`             |          |
| `value`     | `value`      | The progress so far, in the same unit as `target`. The bar width is `value / target` as a percentage.                                                                                                                                                                                                                                                                                                                                                                                                                                      | `number`             |          |

## Related [#related]

Used inside: [`<salla-product-card>`](https://docs.salla.dev/twilight/react/web-components/salla-product-card), [`<salla-product-options>`](https://docs.salla.dev/twilight/react/web-components/salla-product-options), [`<salla-reviews-summary>`](https://docs.salla.dev/twilight/react/web-components/salla-reviews-summary), [`<salla-search-product-card>`](https://docs.salla.dev/twilight/react/web-components/salla-search-product-card).