syidaxdesign system
Home Pricing Settings
ComponentsFeedback

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.
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>

API reference

#

Hover over a name or focus it with the keyboard to see the code. On touch screens, tap the name.

<sy-progress-bar>

Properties

Attribute / PropertyTypeDefaultDescription
booleanfalseIndicate ongoing work without showing a completion percentage.
number0Completed percentage of the total task, from 0 to 100.
'default' | 'error' | 'complete''default'Progress (default), error (error), or complete (complete) state.
'progress-left' | 'progress-center' | 'progress-right' | 'center' | 'left' | 'right''center'Place the value outside the bar or inside its filled portion.
booleanfalseHide the progress percentage.
string''JSON string containing cumulative end percentages and statuses. Example: [{"percent":35,"status":"complete"},{"percent":100}].
string''Progress tooltip title.

Events

EventDetailDescription
CustomEvent<{ percent: number }>Fires whenever `percent` changes. `event.detail.percent` is the new value (0–100, post-clamp).

Methods

MethodReturnsDescription
Promise<number>Return the current value or selected range.
Design SystemTab Navigate Enter Open