[basic] BS5 - Spinner (BS스피너 = BS회전 = BS로더)

1. Spinner 기본
2. Spinner Color (색깔)
3. Spinner Growing (박동 = 사이렌 = 펄스)
4. Spinner Size (크기)
5. Spinner Button (버튼)

※ BS4와 클래스 동일. 단, 세부 CSS 선언은 미세하게 바뀜.

Spinner 기본 

 

<div class="spinner-border"></div>

 

결과보기

---

PS.

.spinner-border {

  display: inline-block;

  width: 2rem;

  height: 2rem;

  vertical-align: -0.125em;

  border: 0.25em solid currentColor;

  border-right-color: transparent;

  border-radius: 50%;

  -webkit-animation: 0.75s linear infinite spinner-border;

  animation: 0.75s linear infinite spinner-border;

}

 

※ 스피너 (= 로더) : 회전하는 테두리.  (.spinner-border 클래스 이용해 생성)

Spinner Color (색깔)

 

<div class="spinner-border text-muted"></div> : 회색

<div class="spinner-border text-primary"></div> : 파란색

<div class="spinner-border text-success"></div> : 녹색

<div class="spinner-border text-info"></div> : 하늘색

<div class="spinner-border text-warning"></div> : 노란색

<div class="spinner-border text-danger"></div> : 빨간색

<div class="spinner-border text-secondary"></div> : 회색

<div class="spinner-border text-dark"></div> : 검정색 (진회색)

<div class="spinner-border text-light"></div> : 연회색

 

결과보기

Spinner Growing (박동 = 사이렌 = 펄스)

 

<div class="spinner-grow text-muted"></div>

<div class="spinner-grow text-primary"></div>

<div class="spinner-grow text-success"></div>

<div class="spinner-grow text-info"></div>

<div class="spinner-grow text-warning"></div>

<div class="spinner-grow text-danger"></div>

<div class="spinner-grow text-secondary"></div>

<div class="spinner-grow text-dark"></div>

<div class="spinner-grow text-light"></div>

 

결과보기

---

PS.

 

.spinner-grow {

  display: inline-block;

  width: 2rem;

  height: 2rem;

  vertical-align: -0.125em;

  background-color: currentColor;

  border-radius: 50%;

  opacity: 0;

  -webkit-animation: 0.75s linear infinite spinner-grow;

  animation: 0.75s linear infinite spinner-grow;

}

 

Spinner Size (크기)

 

<div class="spinner-border spinner-border-sm"></div> 

<div class="spinner-grow spinner-grow-sm"></div>

 

결과보기

---

PS. 1/2 크기로 작아짐.

 

.spinner-border-sm {

  width: 1rem;

  height: 1rem;

  border-width: 0.2em;

}

.spinner-grow-sm {

  width: 1rem;

  height: 1rem;

}

 

Spinner Button (버튼)

 

<button class="btn btn-primary">

  <span class="spinner-border spinner-border-sm"></span>

</button>

<button class="btn btn-primary">

  <span class="spinner-border spinner-border-sm"></span> 로딩 중

</button>

<button class="btn btn-primary" disabled>

  <span class="spinner-border spinner-border-sm"></span> 로딩 중

</button>

<button class="btn btn-primary" disabled>

  <span class="spinner-grow spinner-grow-sm"></span> 로딩 중

</button>

 

결과보기