스피너 Spinner

스피너는 화면이나 요소의 다양한 처리 상태를 시각적으로 표시한 것으로 화면 전체나 일부 요소에 접근하기 위해 일정 시간 동안 대기해야 함을 사용자에게 안내한다.

KRDS 가이드

기본

스피너는 부모 요소의 너비와 높이를 채우고 가운데에 표시됩니다. role="status"와 화면 낭독기용 "로딩 중" 텍스트가 함께 렌더링됩니다.

로딩 중

<script setup lang="ts">
  import { KrdsSpinner } from '@krds.ui/vue'
</script>

<template>
  <div style="position: relative; height: 200px">
    <KrdsSpinner />
  </div>
</template>

라벨 포함

label로 스피너 옆에 안내 텍스트를 표시합니다.

로딩 중Loading data..

<script setup lang="ts">
  import { KrdsSpinner } from '@krds.ui/vue'
</script>

<template>
  <div style="position: relative; height: 200px">
    <KrdsSpinner label="Loading data.." />
  </div>
</template>

입력 필드 로딩

입력 필드와 스피너를 .form-spinner로 감싸면 스피너가 입력 필드 오른쪽 안에 표시됩니다. KrdsInput의 loading을 지정해도 같은 구조로 렌더링됩니다.

Label

로딩 중

검증 중

로딩 중

<script setup lang="ts">
  import { KrdsSpinner } from '@krds.ui/vue'
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 2rem">
    <div class="form-group">
      <div class="form-tit">
        <label for="loading_example1">Label</label>
      </div>
      <div class="form-conts">
        <div class="form-spinner">
          <input id="loading_example1" type="text" class="krds-input" placeholder="placeholder" />
          <KrdsSpinner />
        </div>
      </div>
    </div>

    <div class="form-group">
      <div class="form-tit">
        <label for="loading_example2">검증 중</label>
      </div>
      <div class="form-conts">
        <div class="form-spinner">
          <input id="loading_example2" type="text" class="krds-input" value="입력된 값" placeholder="placeholder" />
          <KrdsSpinner />
        </div>
      </div>
    </div>
  </div>
</template>

KrdsSpinner

Props

이름	타입	기본값	설명
label	string	-	로딩 안내 텍스트