스피너

JavaScript 없이 HTML, CSS로 완전히 구축된 Bootstrap 스피너를 사용하여 구성 요소 또는 페이지의 로드 상태를 나타냅니다.

이 페이지에서

에 대한

부트스트랩 "스피너"를 사용하여 프로젝트의 로드 상태를 표시할 수 있습니다. 그것들은 HTML과 CSS로만 만들어졌습니다. 즉, 그것들을 만드는 데 JavaScript가 필요하지 않습니다. 그러나 가시성을 전환하려면 일부 사용자 정의 JavaScript가 필요합니다. 외관, 정렬 및 크기는 당사의 놀라운 유틸리티 클래스로 쉽게 사용자 정의할 수 있습니다.

접근성을 위해 여기의 각 로더에는 role="status"및 중첩된 <span class="visually-hidden">Loading...</span>.

이 구성 요소의 애니메이션 효과는 prefers-reduced-motion미디어 쿼리에 따라 다릅니다. 접근성 설명서의 감소된 동작 섹션을 참조하십시오 .

보더 스피너

가벼운 로딩 표시기에는 테두리 스피너를 사용하십시오.

HTML

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

그림 물감

테두리 스피너는 텍스트 색상 유틸리티currentColor 로 색상을 사용자 정의할 수 있음 을 border-color의미합니다 . 표준 스피너에서 모든 텍스트 색상 유틸리티를 사용할 수 있습니다.

HTML

<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유틸리티 를 사용하지 않는 이유는 무엇 입니까? 각 테두리 스피너 transparent는 최소한 한 면에 대한 테두리를 지정하므로 .border-{color}유틸리티가 이를 재정의합니다.

성장하는 스피너

보더 스피너가 마음에 들지 않으면 성장 스피너로 전환하십시오. 기술적으로 회전하지는 않지만 반복적으로 성장합니다!

HTML

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

다시 한 번, 이 스피너는 로 제작 되었으므로 텍스트 색상 유틸리티currentColor 를 사용하여 모양을 쉽게 변경할 수 있습니다 . 여기에서는 지원되는 변형과 함께 파란색으로 표시됩니다.

HTML

<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>

조정

부트스트랩의 스피너는 rems, currentColor, 및 display: inline-flex. 즉, 쉽게 크기를 조정하고, 색상을 변경하고, 빠르게 정렬할 수 있습니다.

여유

쉬운 간격 과 같은 여백 유틸리티 를 사용하십시오 ..m-5

HTML

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

놓기

flexbox 유틸리티 , float 유틸리티 또는 텍스트 정렬 유틸리티를 사용하여 어떤 상황에서도 스피너를 필요한 위치에 정확히 배치하십시오.

몸을 풀다

HTML

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

로드 중...

HTML

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

수레

HTML

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

텍스트 정렬

HTML

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

크기

다른 구성 요소 내에서 빠르게 사용할 수 있는 더 작은 스피너를 만들려면 .spinner-border-sm및 를 추가 합니다..spinner-grow-sm

HTML

<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 또는 인라인 스타일을 사용하여 필요에 따라 치수를 변경합니다.

HTML

<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>

버튼

버튼 내에서 스피너를 사용하여 작업이 현재 처리 중이거나 발생하고 있음을 나타냅니다. 스피너 요소에서 텍스트를 교체하고 필요에 따라 버튼 텍스트를 활용할 수도 있습니다.

HTML

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

HTML

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

CSS

변수

v5.2.0에 추가됨

Bootstrap의 진화하는 CSS 변수 접근 방식의 일부로 스피너는 이제 향상된 실시간 사용자 정의를 위해 .spinner-border로컬 CSS 변수를 사용합니다. .spinner-growCSS 변수의 값은 Sass를 통해 설정되므로 Sass 사용자 정의도 계속 지원됩니다.

테두리 스피너 변수:

  --#{$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;

증가하는 스피너 변수:

  --#{$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;

두 스피너의 경우 필요에 따라 이러한 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;

키프레임

스피너에 대한 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;
  }
}