Progress Bar

Display task progress as a horizontal bar.

<sy-progress-bar>Installation guide Basic usage

Live preview

Interact with the component to see results here.

ProgressStatusValue placement

Hide valueIndeterminate progress

View code

HTML

<sy-progress-bar
  percent="65"
  status="default"
  valueposition="center"
  id="sample"
  aria-label="File processing progress"
></sy-progress-bar>
<div class="demo-actions"
  style="display:flex;flex-wrap:wrap;gap:8px;margin-top:16px"
>
  <sy-button id="action-0" size="small">Read current value</sy-button>
</div>
<output id="demo-result" aria-live="polite"></output>

<script type="module">
  const describeResult = value => JSON.stringify(value, (_key, item) => {
    if (item instanceof File) return {
      name: item.name,
      size: item.size,
      type: item.type
    };
    if (item instanceof Element) return `<${item.localName}>`;
    return item;
  }) ?? 'Done';
  const actionTarget0 = document.querySelector("#sample");
  document.querySelector('#action-0').addEventListener('click', async () => {
    const result = await actionTarget0.getValue();
    document.querySelector('#demo-result').textContent = describeResult(result);
  });
</script>

Usage guide

Show how far an upload or processing task has progressed with a horizontal bar.

Tasks with known progress

Pass 0–100 to percent and update it as the task progresses. Control status and number visibility with status and hidePercent.

Tasks with unknown completion time

Use indeterminate to indicate ongoing work. Do not display an arbitrary percentage.

Examples

Progress, error, and completion

Set the state to match the task result.

View code

HTML

<div style="display:grid;gap:16px;width:100%">
  <sy-progress-bar percent="65" status="default"></sy-progress-bar>
  <sy-progress-bar percent="65" status="error"></sy-progress-bar>
  <sy-progress-bar percent="100" status="complete"></sy-progress-bar>
</div>

When completion time is unknown

Indicate that processing continues without showing a number.

View code

HTML

<sy-progress-bar indeterminate aria-label="Processing"></sy-progress-bar>

Segments with multiple states

Divide segments using cumulative end percentages.

View code

HTML

<sy-progress-bar percent="100"
  segment="[{&quot;percent&quot;:35,&quot;status&quot;:&quot;complete&quot;},{&quot;percent&quot;:60,&quot;status&quot;:&quot;error&quot;},{&quot;percent&quot;:100,&quot;status&quot;:&quot;default&quot;}]"
></sy-progress-bar>

Read the current value

Use getValue to retrieve normalized progress.

View code

HTML

<sy-progress-bar
  percent="42"
  id="sample"
  aria-label="File processing progress"
></sy-progress-bar>
<div class="demo-actions"
  style="display:flex;flex-wrap:wrap;gap:8px;margin-top:16px"
>
  <sy-button id="action-0" size="small">Read current value</sy-button>
</div>
<output id="demo-result" aria-live="polite"></output>

<script type="module">
  const describeResult = value => JSON.stringify(value, (_key, item) => {
    if (item instanceof File) return {
      name: item.name,
      size: item.size,
      type: item.type
    };
    if (item instanceof Element) return `<${item.localName}>`;
    return item;
  }) ?? 'Done';
  const actionTarget0 = document.querySelector("#sample");
  document.querySelector('#action-0').addEventListener('click', async () => {
    const result = await actionTarget0.getValue();
    document.querySelector('#demo-result').textContent = describeResult(result);
  });
</script>

Events and payloads

Interact with the component and inspect the latest event name and detail. The code includes subscriptions to events emitted by this component and its children.

View code

HTML

<sy-progress-bar
  percent="65"
  status="default"
  valueposition="center"
  id="sample"
  aria-label="File processing progress"
></sy-progress-bar>
<div class="demo-actions"
  style="display:flex;flex-wrap:wrap;gap:8px;margin-top:16px"
>
  <sy-button id="action-0" size="small">Read current value</sy-button>
</div>
<output id="demo-result" aria-live="polite"></output>
<output id="demo-events" aria-live="polite">Interact with the component to see
  its latest event and payload.</output>

<script type="module">
  const describeResult = value => JSON.stringify(value, (_key, item) => {
    if (item instanceof File) return {
      name: item.name,
      size: item.size,
      type: item.type
    };
    if (item instanceof Element) return `<${item.localName}>`;
    return item;
  }) ?? 'Done';
  const actionTarget0 = document.querySelector("#sample");
  document.querySelector('#action-0').addEventListener('click', async () => {
    const result = await actionTarget0.getValue();
    document.querySelector('#demo-result').textContent = describeResult(result);
  });
  for (const name of ["changed"]) {
    document.addEventListener(name, event => {
      document.querySelector('#demo-events').textContent =
        `${event.target.localName} · ${name}: ${describeResult(event.detail)}`;
    });
  }
</script>

Hide the number and add context

Use hidePercent to hide the number inside the bar and tooltipTitle to describe progress. Hover over it to try.

View code

HTML

<sy-progress-bar
  percent="65"
  status="default"
  valueposition="center"
  hidepercent
  tooltiptitle="65 of 100 items processed"
  id="sample"
  aria-label="File processing progress"
></sy-progress-bar>
<div class="demo-actions"
  style="display:flex;flex-wrap:wrap;gap:8px;margin-top:16px"
>
  <sy-button id="action-0" size="small">Read current value</sy-button>
</div>
<output id="demo-result" aria-live="polite"></output>

<script type="module">
  const describeResult = value => JSON.stringify(value, (_key, item) => {
    if (item instanceof File) return {
      name: item.name,
      size: item.size,
      type: item.type
    };
    if (item instanceof Element) return `<${item.localName}>`;
    return item;
  }) ?? 'Done';
  const component1 = document.querySelector("#sample");
  Object.assign(component1, {
    "hidePercent": true,
    "tooltipTitle": "65 of 100 items processed"
  });
  const actionTarget0 = document.querySelector("#sample");
  document.querySelector('#action-0').addEventListener('click', async () => {
    const result = await actionTarget0.getValue();
    document.querySelector('#demo-result').textContent = describeResult(result);
  });
</script>

Feature examples

Choose a feature from 10 topics. Explore property settings, method calls, event results, and slot layouts through live examples and code.

Find a feature

Usage examples · Overview

Try the selected example. Topics with multiple configurations let you switch between detailed examples.

View code

HTML

Loading the example.