Skip to content

Progress

<quiet-progress> stable since 1.0

Visually represents the progress of a request or task.

50% 
<quiet-progress label="Downloading" value="50">
  50%
</quiet-progress>

Examples Jump to heading

Adding a label Jump to heading

Labels aren't displayed in the progress bar, but they're required for assistive devices such as screen readers. You can add a label using the label attribute. 

<quiet-progress label="Progress" value="50"></quiet-progress>

Showing content Jump to heading

Slot in some text to show content in the progress bar's indicator.

75% 
<quiet-progress label="Progress" value="75">75%</quiet-progress>

Progress rings Jump to heading

Set the appearance attribute to ring to show progress in the shape of a ring.

75% 
<quiet-progress label="Completion" appearance="ring" value="75" id="progress_ring">
  75%
</quiet-progress>

<quiet-slider 
  label="Progress" 
  class="quiet-vh-label" 
  id="slider_ring" 
  value="75" 
  style="max-width: 140px; margin-block-start: 2rem;"
></quiet-slider>

<script>
  const sliderRing = document.getElementById('slider_ring');
  const progressRing = document.getElementById('progress_ring');
  
  sliderRing.addEventListener('input', () => {
    progressRing.value = sliderRing.value;
    progressRing.textContent = sliderRing.value + '%';
  });
</script>

Progress gauges Jump to heading

Set the appearance attribute to gauge to show progress as a dashboard-style half-circle gauge.

75% 
<quiet-progress label="Speed" appearance="gauge" value="75" id="progress_gauge">
  75%
</quiet-progress>

<quiet-slider 
  label="Progress" 
  class="quiet-vh-label" 
  id="slider_gauge" 
  value="75" 
  style="max-width: 140px; margin-block-start: 2rem;"
></quiet-slider>

<script>
  const sliderGauge = document.getElementById('slider_gauge');
  const progressGauge = document.getElementById('progress_gauge');
  
  sliderGauge.addEventListener('input', () => {
    progressGauge.value = sliderGauge.value;
    progressGauge.textContent = sliderGauge.value + '%';
  });
</script>

Progress pies Jump to heading

Set the appearance attribute to pie to show progress in the shape of a filled pie chart. 

<quiet-progress label="Completion" appearance="pie" value="75" id="progress_pie"></quiet-progress>

<quiet-slider 
  label="Progress" 
  class="quiet-vh-label" 
  id="slider_pie" 
  value="75" 
  style="max-width: 140px; margin-block-start: 2rem;"
></quiet-slider>

<script>
  const sliderPie = document.getElementById('slider_pie');
  const progressPie = document.getElementById('progress_pie');
  
  sliderPie.addEventListener('input', () => {
    progressPie.value = sliderPie.value;
  });
</script>

Indeterminate progress Jump to heading

When the completion status can't be determined, the progress bar is considered indeterminate. Add the indeterminate attribute for tasks whose progress can't be reported. 


<quiet-progress label="Waiting for response" indeterminate></quiet-progress>

<br>

<div style="display: flex; flex-wrap: wrap; gap: 1rem;">
  <quiet-progress label="Waiting for response" appearance="ring" indeterminate></quiet-progress>
  <quiet-progress label="Waiting for response" appearance="gauge" indeterminate></quiet-progress>
  <quiet-progress label="Waiting for response" appearance="pie" indeterminate></quiet-progress>
</div>

Changing the size Jump to heading

Use --track-size property to change the track size for bars, rings, and gauges. For rings, gauges, and pie charts, use the --diameter custom property to change the size.


Loading
75% 75% 
<quiet-progress 
  label="Progress"
  value="75"
  style="--track-size: 10px;"
>
</quiet-progress>

<br>

<quiet-progress 
  label="Progress"
  value="75"
  style="--track-size: 60px; font-size: 1.5rem;"
>
  Loading
</quiet-progress>

<br>

<div style="display: flex; flex-wrap: wrap; gap: 1rem;">
  <quiet-progress 
    appearance="ring"
    value="75"
    style="--track-size: 4px; --diameter: 100px;"
  >
    75%
  </quiet-progress>

  <quiet-progress 
    appearance="gauge"
    value="75"
    style="--track-size: 4px; --diameter: 100px;"
  >
    75%
  </quiet-progress>

  <quiet-progress 
    appearance="pie"
    value="75"
    style="--diameter: 100px;"
  >
  </quiet-progress>
</div>

Changing the colors Jump to heading

Use the --track-color custom property to change the progress bar's track color. Use the --indicator-color custom property to change the color of the progress indicator.

Almost there!
75% 75% 
<quiet-progress 
  style="--track-color: mistyrose; --indicator-color: deeppink; color: white;"
  label="Progress" 
  value="75"
>
  Almost there!
</quiet-progress>

<br>

<div style="display: flex; flex-wrap: wrap; gap: 1rem;">
  <quiet-progress 
    style="--track-color: mistyrose; --indicator-color: deeppink;"
    appearance="ring"
    label="Progress" 
    value="75"
  >
    75%
  </quiet-progress>

  <quiet-progress 
    style="--track-color: mistyrose; --indicator-color: deeppink;"
    appearance="gauge"
    label="Progress" 
    value="75"
  >
    75%
  </quiet-progress>

  <quiet-progress 
    style="--track-color: mistyrose; --indicator-color: deeppink;"
    appearance="pie"
    label="Progress" 
    value="75"
  >
  </quiet-progress>
</div>

API Jump to heading

Importing Jump to heading

The autoloader is the recommended way to import components but, if you prefer to do it manually, the following code snippets will be helpful.

CDN Self-hosted

To manually import <quiet-progress> from the CDN, use the following code.

import 'https://cdn.quietui.org/v2.0.0/components/progress/progress.js';

To manually import <quiet-progress> from a self-hosted distribution, use the following code. Remember to replace /path/to/quiet with the appropriate local path. 

import '/path/to/quiet/components/progress/progress.js';

Slots Jump to heading

Progress supports the following slots. Learn more about using slots

Name Description
(default) Text to render inside the progress bar.

Properties Jump to heading

Progress has the following properties that can be set with corresponding attributes. In many cases, the attribute's name is the same as the property's name. If an attribute is different, it will be displayed after the property. Learn more about attributes and properties

Property / Attribute Description Reflects Type Default
label A custom label for assistive devices. string
appearance The type of progress bar to render. 'bar'
'gauge'
'pie'
'ring' 		'bar'
min The progress bar's minimum value. number 0
max The progress bar's maximum value. number 100
value The progress bar's current value. number 0
percentage The progress bar's current value as a percentage. This is a readonly property.
indeterminate When the completion status can't be determined, the progress bar is considered indeterminate and the value is ignored. Useful for tasks whose progress can't be reported. boolean false

CSS custom properties Jump to heading

Progress supports the following CSS custom properties. You can style them like any other CSS property. Learn more about CSS custom properties

Name Description Default
--track-color The color of the progress bar's track. var(--quiet-neutral-fill-softer)
--track-size The height or thickness of the track, depending on the type of progress bar. 1.5em | 1em
--indicator-color The color of the progress bar's value indicator. var(--quiet-primary-fill-mid)
--diameter For progress rings, the diameter of the ring. 10em

CSS parts Jump to heading

Progress exposes internal elements that can be styled with CSS using the selectors shown below. Learn more about CSS parts

Name Description CSS selector
track The progress bar's track, a <div> for progress bars and a <circle> for progress rings. ::part(track)
indicator The progress bar's current value indicator, a <div> for progress bars and an SVG <circle> for progress rings. ::part(indicator)
content The container that holds any content that's been slotted in. ::part(content)
Search this website Toggle dark mode View the code on GitHub Follow @quietui.org on Bluesky Follow @quiet_ui on X

    No results found