Circular Progress

Display circular progress in a compact space.

<sy-progress-circular>Installation guide Basic usage

Live preview

Interact with the component to see results here.

ProgressStatusSize

Hide valueIndeterminate progress

View code

HTML

<sy-progress-circular
  percent="65"
  status="default"
  size="medium"
  id="sample"
  aria-label="File processing progress"
></sy-progress-circular>
<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 one progress value concisely in a card or summary. Progress Bar is easier to read when comparing many values in a long list.

Progress: percent ranges from 0 to 100. Read the current value with getValue().
Size and status: Set the size with size, status with status, and hide the number with hideText.
When completion time is unknown: Use indeterminate to indicate a waiting state.

Examples

Size

Choose small, medium, or large to match nearby content.

View code

HTML

<div style="display:flex;flex-wrap:wrap;align-items:center;gap:16px">
  <sy-progress-circular size="small" percent="65"></sy-progress-circular>
  <sy-progress-circular size="medium" percent="65"></sy-progress-circular>
  <sy-progress-circular size="large" percent="65"></sy-progress-circular>
</div>

Status display

Distinguish progress, error, and completion states.

View code

HTML

<div style="display:flex;flex-wrap:wrap;align-items:center;gap:16px">
  <sy-progress-circular percent="65" status="default"></sy-progress-circular>
  <sy-progress-circular percent="65" status="error"></sy-progress-circular>
  <sy-progress-circular percent="100" status="complete"></sy-progress-circular>
</div>

Segment states

Show the proportions of multiple states in one circle.

View code

HTML

<sy-progress-circular 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-circular>

When progress is unknown

Show only that work is ongoing, without a completion percentage.

View code

HTML

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

Read the current value

Use getValue to check the currently displayed value.

View code

HTML

<sy-progress-circular
  percent="42"
  id="sample"
  aria-label="File processing progress"
></sy-progress-circular>
<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-circular
  percent="65"
  status="default"
  size="medium"
  id="sample"
  aria-label="File processing progress"
></sy-progress-circular>
<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>

Provide help instead of a number

hideText hides the center number. Use the tooltip slot to explain what the value means.

View code

HTML

<sy-progress-circular
  percent="65"
  hidetext
  tooltiptitle="File processing"
><span slot="tooltip">Processed 65 of 100 items.</span></sy-progress-circular>

Completed ring

Show a completed progress ring without a percentage label.

View code

HTML

<sy-progress-circular
  percent="100"
  status="complete"
  size="medium"
  hidetext
  id="sample"
  aria-label="File processing progress"
></sy-progress-circular>
<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, {
    "percent": 100,
    "status": "complete",
    "hideText": true
  });
  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.