syidaxdesign system
홈 가격 내 정보
ComponentsFeedback

Spinner

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

<sy-spinner>설치 안내 기본 사용법
Live preview
컴포넌트를 조작하면 여기에 결과가 표시됩니다.
코드 보기
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을 고려하세요.

  1. 대기 영역 확보

    높이가 있는 컨테이너에 배치합니다. inline은 해당 영역에 배경 마스크를 함께 표시합니다.

  2. 짧은 작업의 깜빡임 방지

    delay에 밀리초 단위 지연을 설정하세요.

  3. 완료하면 해제

    작업이 끝나면 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>

API reference

#

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

<sy-spinner>

Properties

Attribute / PropertyTypeDefaultDescription
number0표시 전 지연 시간(ms)입니다.
string''로딩 표시와 함께 읽힐 안내 문구입니다.
booleanfalse컴포넌트의 표시를 숨깁니다.
booleanfalse부모 영역에 배경 마스크를 적용합니다.
'small' | 'medium' | 'large' | 'xlarge''medium'컴포넌트의 크기입니다.

Slots

SlotDescription
컴포넌트의 본문 또는 자식 항목입니다.
Design SystemTab 이동 Enter 열기