syidaxdesign system
Home Pricing Settings
ComponentsFeedback

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

API reference

#

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

<sy-progress-circular>

Properties

Attribute / PropertyTypeDefaultDescription
number0Completed percentage of the total task, from 0 to 100.
string''JSON string containing cumulative end percentages and statuses. Example: [{"percent":35,"status":"complete"},{"percent":100}].
'default' | 'error' | 'complete''default'Progress (default), error (error), or complete (complete) state.
booleanfalseHide the progress percentage in the center.
'small' | 'medium' | 'large''medium'Component size.
string''Progress tooltip title.
booleanfalseIndicate ongoing work without showing a completion percentage.

Events

EventDetailDescription
CustomEvent<{ percent: number }>Fires whenever `percent` changes. `event.detail.percent` is the new value.

Methods

MethodReturnsDescription
Promise<number>Return the current value or selected range.

Slots

SlotDescription
Content displayed in the tooltip area.
Design SystemTab Navigate Enter Open