Progress Bar

처리가 얼마나 진행되었는지 가로 막대로 표현합니다.

<sy-progress-bar>설치 안내 기본 사용법

Live preview

컴포넌트를 조작하면 여기에 결과가 표시됩니다.

진행률상태수치 위치

수치 숨기기진행률 알 수 없음

코드 보기

HTML

<sy-progress-bar
  percent="65"
  status="default"
  valueposition="center"
  id="sample"
  aria-label="파일 처리 진행률"
></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">현재 값 조회</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>

사용 가이드

업로드·처리 작업이 얼마나 진행됐는지 가로 막대로 보여줍니다.

진행률을 아는 작업

percent에 0–100을 전달하고 앱에서 진행에 맞춰 갱신합니다. status와 hidePercent로 상태·숫자 표시를 조절하세요.

완료 시점을 모르는 작업

indeterminate로 작업 중임을 표시하세요. 임의의 진행률을 보여주지 마세요.

예제

진행·오류·완료

작업 결과에 맞는 상태를 설정합니다.

코드 보기

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>

완료 시점을 모를 때

수치를 표시하지 않고 처리가 계속되고 있음을 알립니다.

코드 보기

HTML

<sy-progress-bar indeterminate aria-label="처리 중"></sy-progress-bar>

여러 상태의 구간

누적 종료 비율로 구간을 나눕니다.

코드 보기

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>

현재 값 읽기

getValue로 정규화된 진행률을 조회합니다.

코드 보기

HTML

<sy-progress-bar
  percent="42"
  id="sample"
  aria-label="파일 처리 진행률"
></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">현재 값 조회</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-bar
  percent="65"
  status="default"
  valueposition="center"
  id="sample"
  aria-label="파일 처리 진행률"
></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">현재 값 조회</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>

수치 숨기기와 추가 설명

hidePercent로 막대 안 숫자를 숨기고 tooltipTitle에 진행 상황을 설명합니다. 포인터를 올려 보세요.

코드 보기

HTML

<sy-progress-bar
  percent="65"
  status="default"
  valueposition="center"
  hidepercent
  tooltiptitle="전체 100개 중 65개 처리"
  id="sample"
  aria-label="파일 처리 진행률"
></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">현재 값 조회</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, {
    "hidePercent": true,
    "tooltipTitle": "전체 100개 중 65개 처리"
  });
  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

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