syidaxdesign system
홈 가격 내 정보
ComponentsFeedback

Circular Progress

제한된 공간에서 진행률을 원형으로 보여줍니다.

<sy-progress-circular>설치 안내 기본 사용법
Live preview
컴포넌트를 조작하면 여기에 결과가 표시됩니다.
코드 보기
HTML
<sy-progress-circular
  percent="65"
  status="default"
  size="medium"
  id="sample"
  aria-label="파일 처리 진행률"
></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">현재 값 조회</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;
  }) ?? '완료';
  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>

사용 가이드

#

카드·요약 영역에서 하나의 진행률을 간결하게 보여줍니다. 긴 목록의 여러 값을 비교할 때는 Progress Bar가 읽기 쉽습니다.

진행률
percent는 0–100입니다. getValue()로 현재 값을 읽을 수 있습니다.
크기와 상태
size로 크기를, status로 상태를 정하고 hideText로 숫자를 숨길 수 있습니다.
완료 시점을 모를 때
indeterminate로 대기 중임을 표시합니다.

예제

#

크기

small·medium·large 중 주변 콘텐츠에 맞는 크기를 선택하세요.

코드 보기
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>

상태 표시

진행·오류·완료를 상태로 구분합니다.

코드 보기
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>

구간별 상태

하나의 원 안에서 여러 상태의 비율을 표현합니다.

코드 보기
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>

진행률을 알 수 없을 때

완료 비율 대신 진행 중인 상태만 표시합니다.

코드 보기
HTML
<sy-progress-circular indeterminate aria-label="처리 중"></sy-progress-circular>

현재 값 읽기

getValue로 현재 표시 값을 확인합니다.

코드 보기
HTML
<sy-progress-circular
  percent="42"
  id="sample"
  aria-label="파일 처리 진행률"
></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">현재 값 조회</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;
  }) ?? '완료';
  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>

이벤트와 전달 값

컴포넌트를 조작하고 최근 이벤트의 이름과 detail 값을 확인하세요. 코드에는 이 컴포넌트와 하위 구성 요소가 보내는 이벤트의 구독 방법이 모두 포함되어 있습니다.

코드 보기
HTML
<sy-progress-circular
  percent="65"
  status="default"
  size="medium"
  id="sample"
  aria-label="파일 처리 진행률"
></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">현재 값 조회</sy-button>
</div>
<output id="demo-result" aria-live="polite"></output>
<output id="demo-events" 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;
  }) ?? '완료';
  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>

숫자 대신 도움말 제공

hideText는 가운데 숫자를 숨깁니다. tooltip 슬롯으로 수치의 의미를 설명할 수 있습니다.

코드 보기
HTML
<sy-progress-circular
  percent="65"
  hidetext
  tooltiptitle="파일 처리"
><span slot="tooltip">전체 100개 중 65개 처리했습니다.</span></sy-progress-circular>

완료된 진행 표시

백분율 텍스트 없이 완료 상태의 원형 진행 표시를 보여줍니다.

코드 보기
HTML
<sy-progress-circular
  percent="100"
  status="complete"
  size="medium"
  hidetext
  id="sample"
  aria-label="파일 처리 진행률"
></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">현재 값 조회</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;
  }) ?? '완료';
  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

#

이름에 마우스를 올리거나 키보드로 선택하면 적용 코드를 확인할 수 있습니다. 터치 화면에서는 이름을 누르세요.

<sy-progress-circular>

Properties

Attribute / PropertyTypeDefaultDescription
number0전체 작업 대비 완료 비율(0~100)입니다.
string''누적 종료 비율과 상태를 가진 JSON 문자열입니다. 예: [{"percent":35,"status":"complete"},{"percent":100}].
'default' | 'error' | 'complete''default'진행(default)·오류(error)·완료(complete) 상태입니다.
booleanfalse중앙의 진행률 수치를 숨깁니다.
'small' | 'medium' | 'large''medium'컴포넌트의 크기입니다.
string''진행률 툴팁의 제목입니다.
booleanfalse완료 비율을 표시하지 않고 작업 진행만 알립니다.

Events

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

Methods

MethodReturnsDescription
Promise<number>현재 값 또는 선택 범위를 반환합니다.

Slots

SlotDescription
tooltip 영역에 표시할 내용입니다.
Design SystemTab 이동 Enter 열기