Spinners

Spinners (스피너)

HTML과 CSS만으로 자바스크립트 없이 만들어진 Bootstrap 스피너로 컴포넌트나 페이지의 로딩 상태를 나타내는 방법을 다룹니다.

출처: 문서

본문

소개 (About)

Bootstrap "스피너"는 프로젝트에서 로딩 상태를 보여주는 데 쓸 수 있습니다. HTML과 CSS만으로 만들어지므로 만들 때 자바스크립트가 필요하지 않습니다. 다만 표시 여부를 토글하려면 약간의 커스텀 JavaScript가 필요합니다. 모양, 정렬, 크기는 멋진 유틸리티 클래스들로 쉽게 커스터마이즈할 수 있습니다.

접근성을 위해 여기 있는 각 로더에는 role="status"와 중첩된 <span class="visually-hidden">Loading...</span>이 포함되어 있습니다.

이 컴포넌트의 애니메이션 효과는 prefers-reduced-motion 미디어 쿼리에 의존합니다. 접근성 문서의 reduced motion 섹션을 참고하세요.

Border spinner

가벼운 로딩 표시기에는 border spinner를 사용하세요.

<div class="spinner-border" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

색상 (Colors)

border spinner는 border-color에 currentColor를 사용하므로 텍스트 색상 유틸리티로 색을 커스터마이즈할 수 있습니다. 표준 스피너에 어떤 텍스트 색상 유틸리티든 사용할 수 있습니다.

<div class="spinner-border text-primary" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-secondary" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-success" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-danger" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-warning" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-info" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-light" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-dark" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

왜 border-color 유틸리티를 쓰지 않을까요? 각 border spinner는 적어도 한 면에 transparent border를 지정하므로, .border-{color} 유틸리티를 쓰면 그 부분이 덮어써집니다.

Growing spinner

border spinner가 마음에 들지 않는다면 grow spinner로 전환하세요. 엄밀히 말하면 회전하지는 않지만, 반복적으로 커집니다!

<div class="spinner-grow" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

이 스피너도 currentColor로 만들어졌으므로 텍스트 색상 유틸리티로 모양을 쉽게 바꿀 수 있습니다. 여기 파란색과 지원되는 변형들이 있습니다.

<div class="spinner-grow text-primary" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-secondary" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-success" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-danger" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-warning" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-info" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-light" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-dark" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

정렬 (Alignment)

Bootstrap의 스피너는 rems, currentColor, display: inline-flex로 만들어집니다. 즉 크기를 쉽게 바꾸고, 색을 다시 칠하고, 빠르게 정렬할 수 있습니다.

마진 (Margin)

쉽게 간격을 주려면 .m-5 같은 마진 유틸리티를 사용하세요.

<div class="spinner-border m-5" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

배치 (Placement)

어떤 상황에서든 스피너를 필요한 위치에 정확히 두려면 flexbox 유틸리티, float 유틸리티, 또는 텍스트 정렬 유틸리티를 사용하세요.

Flex

<div class="d-flex justify-content-center">
  <div class="spinner-border" role="status">
    <span class="visually-hidden">Loading...</span>
  </div>
</div>

<div class="d-flex align-items-center">
  <strong role="status">Loading...</strong>
  <div class="spinner-border ms-auto" aria-hidden="true"></div>
</div>

Floats

<div class="clearfix">
  <div class="spinner-border float-end" role="status">
    <span class="visually-hidden">Loading...</span>
  </div>
</div>

텍스트 정렬 (Text align)

<div class="text-center">
  <div class="spinner-border" role="status">
    <span class="visually-hidden">Loading...</span>
  </div>
</div>

크기 (Size)

.spinner-border-sm과 .spinner-grow-sm을 추가하면 다른 컴포넌트 안에서 빠르게 쓸 수 있는 더 작은 스피너를 만들 수 있습니다.

<div class="spinner-border spinner-border-sm" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow spinner-grow-sm" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

또는 필요에 따라 커스텀 CSS나 인라인 스타일로 크기를 바꿀 수도 있습니다.

<div class="spinner-border" style="width: 3rem; height: 3rem;" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow" style="width: 3rem; height: 3rem;" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

버튼 (Buttons)

버튼 안에 스피너를 사용해 어떤 동작이 처리 중이거나 진행 중임을 나타낼 수 있습니다. 스피너 요소에서 텍스트를 빼고 필요에 따라 버튼 텍스트를 활용할 수도 있습니다.

<button class="btn btn-primary" type="button" disabled>
  <span class="spinner-border spinner-border-sm" aria-hidden="true"></span>
  <span class="visually-hidden" role="status">Loading...</span>
</button>
<button class="btn btn-primary" type="button" disabled>
  <span class="spinner-border spinner-border-sm" aria-hidden="true"></span>
  <span role="status">Loading...</span>
</button>

<button class="btn btn-primary" type="button" disabled>
  <span class="spinner-grow spinner-grow-sm" aria-hidden="true"></span>
  <span class="visually-hidden" role="status">Loading...</span>
</button>
<button class="btn btn-primary" type="button" disabled>
  <span class="spinner-grow spinner-grow-sm" aria-hidden="true"></span>
  <span role="status">Loading...</span>
</button>

CSS

변수 (Variables)

v5.2.0에서 추가됨

Bootstrap의 진화하는 CSS 변수 접근 방식의 일부로, 스피너는 이제 향상된 실시간 커스터마이즈를 위해 .spinner-border와 .spinner-grow에 로컬 CSS 변수를 사용합니다. CSS 변수의 값은 Sass로 설정되므로 Sass 커스터마이즈도 여전히 지원됩니다.

Border spinner 변수:

--#{$prefix}spinner-width: #{$spinner-width};
--#{$prefix}spinner-height: #{$spinner-height};
--#{$prefix}spinner-vertical-align: #{$spinner-vertical-align};
--#{$prefix}spinner-border-width: #{$spinner-border-width};
--#{$prefix}spinner-animation-speed: #{$spinner-animation-speed};
--#{$prefix}spinner-animation-name: spinner-border;

Growing spinner 변수:

--#{$prefix}spinner-width: #{$spinner-width};
--#{$prefix}spinner-height: #{$spinner-height};
--#{$prefix}spinner-vertical-align: #{$spinner-vertical-align};
--#{$prefix}spinner-animation-speed: #{$spinner-animation-speed};
--#{$prefix}spinner-animation-name: spinner-grow;

두 스피너 모두에서 작은 스피너 modifier 클래스가 필요에 따라 이 CSS 변수들의 값을 업데이트하는 데 사용됩니다. 예를 들어 .spinner-border-sm 클래스는 다음과 같은 일을 합니다:

--#{$prefix}spinner-width: #{$spinner-width-sm};
--#{$prefix}spinner-height: #{$spinner-height-sm};
--#{$prefix}spinner-border-width: #{$spinner-border-width-sm};

Sass 변수

$spinner-width:           2rem;
$spinner-height:          $spinner-width;
$spinner-vertical-align:  -.125em;
$spinner-border-width:    .25em;
$spinner-animation-speed: .75s;

$spinner-width-sm:        1rem;
$spinner-height-sm:       $spinner-width-sm;
$spinner-border-width-sm: .2em;

Keyframes

스피너의 CSS 애니메이션을 만드는 데 사용됩니다. scss/_spinners.scss에 포함되어 있습니다.

@keyframes spinner-border {
  to { transform: rotate(360deg) #{"/* rtl:ignore */"}; }
}

@keyframes spinner-grow {
  0% {
    transform: scale(0);
  }
  50% {
    opacity: 1;
    transform: none;
  }
}

더 알아보기 (Learn more)

• Bootstrap 문서