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>

기능별 예제

10개 주제에서 필요한 기능을 선택하세요. 속성 설정, 메서드 호출, 이벤트 결과와 슬롯 구성을 실행 화면과 코드로 확인할 수 있습니다.

기능 찾기

사용 예제 · Overview

선택한 예제를 직접 조작해 보세요. 여러 구성이 있는 주제는 세부 예제를 바꿀 수 있습니다.

코드 보기

HTML

예제를 불러오고 있습니다.