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

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

Spinner 기본

 

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

 

---

PS.

 

.spinner-border {

    display: inline-block;

    width: 2rem;

    height: 2rem;

    vertical-align: text-bottom;

    border: .25em solid currentColor;

    border-right-color: transparent;

    border-radius: 50%;

    -webkit-animation: spinner-border .75s linear infinite;

    animation: spinner-border .75s linear infinite;

}

 

※ 스피너 (= 로더) : 회전하는 테두리.  (.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: text-bottom;

    background-color: currentColor;

    border-radius: 50%;

    opacity: 0;

    -webkit-animation: spinner-grow .75s linear infinite;

    animation: spinner-grow .75s linear infinite;

}

 

Spinner Size (크기)

 

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

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

 

결과보기

※ 1/2 크기로 줄어듦.

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>

 

결과보기