Spinner 회전 그래픽

가벼운 회전 로딩 아이콘입니다. size 는 세 단계 프리셋 또는 숫자로 사용자 지정할 수 있고, color 를 넘기지 않으면 currentColor 를 상속합니다.

로딩 표시

<template>
  <div class="demo-col">
    <div class="demo-row" style="gap: 48px; flex-wrap: wrap">
      <div class="demo-col" style="align-items: center; gap: 8px">
        <LhSpinner size="small" />
        <span class="demo-note">small</span>
      </div>
      <div class="demo-col" style="align-items: center; gap: 8px">
        <LhSpinner />
        <span class="demo-note">default</span>
      </div>
      <div class="demo-col" style="align-items: center; gap: 8px">
        <LhSpinner size="large" />
        <span class="demo-note">large</span>
      </div>
      <div class="demo-col" style="align-items: center; gap: 8px">
        <LhSpinner :size="56" color="var(--lh-primary-color)" />
        <span class="demo-note">사용자 지정 size=56 + color</span>
      </div>
    </div>
  </div>
</template>

Props

프로퍼티	설명	타입	기본값
size	크기	'small' \| 'default' \| 'large' \| number	'default'
color	회전 색상 (CSS color 값, 넘기지 않으면 currentColor 상속)	string	—
sx	sx 레이아웃 단축 프로퍼티	—	—