Skip to content

Progress Bar

SixProgressBar

Progress bars are used to show the status of an ongoing operation.

html
<six-progress-bar percentage="50"></six-progress-bar>

Examples

Custom Height

Use the --height custom property to set the progress bar's height.

html
<six-progress-bar percentage="50" style="--height: 6px"></six-progress-bar>

Labels

Use the default slot to show a label.

50%
removeadd
html
<six-progress-bar percentage="50" class="progress-bar-labels">50%</six-progress-bar>

<br>

<six-button size="small" circle><six-icon size="small">remove</six-icon></six-button>
<six-button size="small" circle><six-icon size="small">add</six-icon></six-button>

<script type="module">
  const progressBar = document.querySelector('.progress-bar-labels');
  const subtractButton = progressBar.nextElementSibling.nextElementSibling;
  const addButton = subtractButton.nextElementSibling;

  addButton.addEventListener('click', () => {
    const percentage = Math.min(100, progressBar.percentage + 10);
    progressBar.percentage = percentage;
    progressBar.textContent = `${percentage}%`;
  });

  subtractButton.addEventListener('click', () => {
    const percentage = Math.max(0, progressBar.percentage - 10);
    progressBar.percentage = percentage;
    progressBar.textContent = `${percentage}%`;
  });
</script>

Indeterminate

The indeterminate attribute can be used to inform the user that the operation is pending, but its status cannot currently be determined. In this state, percentage is ignored and the label, if present, will not be shown.

html
<six-progress-bar indeterminate></six-progress-bar>

Properties

PropertyAttributeDescriptionTypeDefault
indeterminateindeterminateWhen true, percentage is ignored, the label is hidden, and the progress bar is drawn in an indeterminate state.booleanfalse
percentagepercentageThe progress bar's percentage, 0 to 100.number0

Slots

SlotDescription
A label to show inside the indicator.

Shadow Parts

PartDescription
"base"The component's base wrapper.
"indicator"The progress bar indicator.
"label"The progress bar label.

CSS Custom Properties

NameDescription
--heightThe progress bar's height.
--indicator-colorThe indicator color.
--label-colorThe label color.
--track-colorThe track color.

Copyright © 2021-present SIX-Group