Progress

Helper required

This component requires a helper. Make sure to read the documentation carefully so you know how to use it.

A progress bar, used to show the progress of a task.

Usage

'Read the “', Usage, '” section'

Preview

Code

ProgressExample.astro

---
import { Progress } from 'studiocms:ui/components/progress';
---

<Progress label="Example Progress Bar" id="progress" max={100} value={50} />

Value and Max

'Read the “', Value and Max, '” section'

Similar to the native HTML <progress> element, the Progress component takes two props: value and max. The value prop represents the current progress, while the max prop represents the maximum value of the progress bar.

The value and max can be adjusted after the component has been initialized by using the ProgressHelper, which takes in the ID of the progress bar as the only argument:

Preview

Code

ProgressExample.astro

---
import { Progress } from 'studiocms:ui/components/progress';
---

<Progress label="Example Progress Bar" id="progress" max={100} value={50} />
<script>
  import { ProgressHelper } from 'studiocms:ui/components/progress/client';

  const progress = new ProgressHelper('progress');
  progress.setValue(75);
  progress.setMax(150);

  // You can obtain the value, max and percentage of the progress bar
  progress.getValue(); // 75
  progress.getMax(); // 150
  progress.getPercentage(); // 50
</script>

Colors

'Read the “', Colors, '” section'

The progress component can be colored with all the colors available in the theme by setting the color prop to one of the following values:

• primary
• success
• warning
• danger
• info
• monochrome

Preview

Code

ProgressExample.astro

---
import { Progress } from 'studiocms:ui/components/progress';
---

<Progress label="Example Progress Bar - Primary" id="progress-1" max={100} value={50} color="primary" />
<Progress label="Example Progress Bar - Success" id="progress-2" max={100} value={50} color="success" />
<Progress label="Example Progress Bar - Warning" id="progress-3" max={100} value={50} color="warning" />
<Progress label="Example Progress Bar - Danger" id="progress-4" max={100} value={50} color="danger" />
<Progress label="Example Progress Bar - Info" id="progress-5" max={100} value={50} color="info" />
<Progress label="Example Progress Bar - Monochrome" id="progress-6" max={100} value={50} color="monochrome" />