스피너 Spinner

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

KRDS 가이드

기본

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

import { Component } from '@angular/core'
import { KrdsSpinner } from '@krds.ui/angular'

@Component({
  selector: 'demo-spinner-basic',
  imports: [KrdsSpinner],
  template: `
    <div style="position: relative; height: 200px">
      <krds-spinner />
    </div>
  `
})
export default class SpinnerBasic {}

라벨 포함

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

import { Component } from '@angular/core'
import { KrdsSpinner } from '@krds.ui/angular'

@Component({
  selector: 'demo-spinner-with-label',
  imports: [KrdsSpinner],
  template: `
    <div style="position: relative; height: 200px">
      <krds-spinner label="Loading data.." />
    </div>
  `
})
export default class SpinnerWithLabel {}

입력 필드 로딩

폼 그룹(<krds-form-group>)에 loading을 주면 입력 필드와 스피너를 .form-spinner로 감싸 스피너를 입력 필드 오른쪽 안에 표시합니다.

import { Component } from '@angular/core'
import { KrdsFormGroup, KrdsInput } from '@krds.ui/angular'

@Component({
  selector: 'demo-spinner-input-loading',
  imports: [KrdsFormGroup, KrdsInput],
  template: `
    <div style="display: flex; flex-direction: column; gap: 2rem">
      <krds-form-group label="Label" loading>
        <input krdsInput type="text" placeholder="placeholder" />
      </krds-form-group>
      <krds-form-group label="검증 중" loading>
        <input krdsInput type="text" value="입력된 값" placeholder="placeholder" />
      </krds-form-group>
    </div>
  `
})
export default class SpinnerInputLoading {}

KrdsSpinner

선택자 krds-spinner

Inputs

이름	타입	기본값	설명
label	string	-	화면에 보이는 안내 문구