Spinner

Import

<link rel="stylesheet" href="/guide/css/base/index.css" />
<link rel="stylesheet" href="/guide/css/components/spinner.css" />

Live

Sizes

Colors

Specs

Size Width / Height Border Width Preview
sm 16px 2px
md 24px 3px
lg 36px 4px
xl 48px 4px

Code

<!-- Primary (default) -->
<span class="spinner spinner--md spinner--primary" role="status" aria-label="로딩 중"></span>

<!-- Sizes -->
<span class="spinner spinner--sm spinner--primary" role="status" aria-label="로딩 중"></span>
<span class="spinner spinner--md spinner--primary" role="status" aria-label="로딩 중"></span>
<span class="spinner spinner--lg spinner--primary" role="status" aria-label="로딩 중"></span>
<span class="spinner spinner--xl spinner--primary" role="status" aria-label="로딩 중"></span>

<!-- Colors -->
<span class="spinner spinner--lg spinner--primary" role="status" aria-label="로딩 중"></span>
<span class="spinner spinner--lg spinner--success" role="status" aria-label="로딩 중"></span>
<span class="spinner spinner--lg spinner--error" role="status" aria-label="로딩 중"></span>

<!-- White (다크 배경 전용) -->
<div style="background-color: var(--gray-700);">
  <span class="spinner spinner--lg spinner--white" role="status" aria-label="로딩 중"></span>
</div>

Classes

클래스 타입 설명
.spinner 루트 로딩 인디케이터 — 기본 sm · primary · 0.75s 회전
.spinner--sm 수정자 16px · border 2px
.spinner--md 수정자 24px · border 3px
.spinner--lg 수정자 36px · border 4px
.spinner--xl 수정자 48px · border 4px
.spinner--primary 수정자 color-primary-main (green) 아크
.spinner--success 수정자 color-success-main (green) 아크
.spinner--error 수정자 color-error-main (red) 아크
.spinner--white 수정자 white 아크 — 다크 배경(gray-700 등) 전용