Spinner

처리 중인 상태를 회전 표시와 짧은 문구로 전달합니다.

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

Live preview

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

크기대기 안내표시 지연(ms)

배경 마스크숨기기

코드 보기

HTML

<div
  style="position:relative;min-height:160px;border:1px solid rgba(103,80,164,.15)"
>
  <sy-spinner
    description="불러오는 중"
    size="medium"
    delay="0"
  ></sy-spinner>
</div>

사용 가이드

짧은 처리나 진행률을 알 수 없는 대기 상태를 나타냅니다. 예상 콘텐츠 구조가 있다면 Skeleton을 고려하세요.

대기 영역 확보
높이가 있는 컨테이너에 배치합니다. inline은 해당 영역에 배경 마스크를 함께 표시합니다.
짧은 작업의 깜빡임 방지
delay에 밀리초 단위 지연을 설정하세요.
완료하면 해제
작업이 끝나면 hidden = true로 숨기거나 요소를 제거하세요.

예제

처리 중 표시

짧은 안내 문구로 무엇을 기다리는지 알려주세요.

코드 보기

HTML

<div
  style="position:relative;min-height:160px;border:1px solid rgba(103,80,164,.15)"
>
  <sy-spinner description="불러오는 중"></sy-spinner>
</div>

영역 마스크

inline을 지정하면 영역 위에 배경 마스크를 표시합니다.

코드 보기

HTML

<div
  style="position:relative;min-height:160px;border:1px solid rgba(103,80,164,.15)"
>
  <sy-spinner description="저장하는 중" inline></sy-spinner>
</div>

표시 지연

800ms 이후에 표시합니다. 빠르게 끝나는 작업에서는 표시를 생략할 수 있습니다.

코드 보기

HTML

<div
  style="position:relative;min-height:160px;border:1px solid rgba(103,80,164,.15)"
>
  <sy-spinner description="불러오는 중" delay="800"></sy-spinner>
</div>

큰 표시

넓은 콘텐츠 영역에서 사용하는 xlarge 크기입니다.

코드 보기

HTML

<div
  style="position:relative;min-height:160px;border:1px solid rgba(103,80,164,.15)"
>
  <sy-spinner description="불러오는 중" size="xlarge"></sy-spinner>
</div>

처리 완료 후 숨기기

hidden을 켜면 스피너가 사라집니다. 실제 앱에서는 작업 시작 시 false, 완료 또는 실패 후 true로 바꾸세요.

코드 보기

HTML

<div
  style="position:relative;min-height:160px;border:1px solid rgba(103,80,164,.15)"
>
  <sy-spinner
    description="불러오는 중"
    size="medium"
    delay="0"
    hidden
    id="supplement-1"
  ></sy-spinner>
</div>

<script type="module">
  const component1 = document.querySelector("#supplement-1");
  Object.assign(component1, {
    "hidden": true
  });
</script>

인라인 로딩

작은 로딩 표시를 주변 콘텐츠 흐름 안에 배치합니다.

코드 보기

HTML

<div
  style="position:relative;min-height:160px;border:1px solid rgba(103,80,164,.15)"
>
  <sy-spinner
    description="불러오는 중"
    size="small"
    delay="0"
    inline
    id="supplement-1"
  ></sy-spinner>
</div>

<script type="module">
  const component1 = document.querySelector("#supplement-1");
  Object.assign(component1, {
    "inline": true,
    "size": "small"
  });
</script>

기능별 예제

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

기능 찾기

사용 예제 · Overview

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

코드 보기

HTML

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