스피너 (Spinners)

테두리 스피너(Spinner border)

테두리 스피너는 테두리 색상에 기본 색들을 사용하므로 텍스트 색상 유틸리티로 색상을 사용자 정의할 수 있습니다. 표준 스피너에서 텍스트 색상 유틸리티를 사용할 수 있습니다.

<div class="spinner-border" role="status"> </div>
<div class="spinner-border success" role="status"> </div>
<div class="spinner-border primary" role="status"> </div>
<div class="spinner-border warning" role="status"> </div>
<div class="spinner-border danger" role="status"> </div>
<div class="spinner-border secondary" role="status"> </div>
<div class="spinner-border gray" role="status"> </div>
<div class="spinner-border info  " role="status"></div>
<div class="spinner-border brown" role="status"> </div>

테두리 스피너 배경

.alpha 클래스를 추가하여 테두리 스피너의 배경을 없앨 수 있습니다.

<div class="spinner-border alpha" role="status"> </div>
<div class="spinner-border success alpha" role="status"> </div>
<div class="spinner-border primary alpha" role="status"> </div>
<div class="spinner-border warning alpha" role="status"> </div>
<div class="spinner-border danger alpha" role="status"> </div>
<div class="spinner-border secondary alpha" role="status"> </div>
<div class="spinner-border gray alpha" role="status"> </div>
<div class="spinner-border info alpha" role="status"></div>
<div class="spinner-border brown alpha" role="status"> </div>

도트 스피너(Spinner dot)

.spinner-dot 클래스 를 사용해 도트 스피너를 사용할 수 있습니다.

<div class="spinner-dot" role="status"> </div>
<div class="spinner-dot success" role="status"> </div>
<div class="spinner-dot primary" role="status"> </div>
<div class="spinner-dot warning" role="status"> </div>
<div class="spinner-dot danger" role="status"> </div>
<div class="spinner-dot secondary" role="status"> </div>
<div class="spinner-dot gray" role="status"> </div>
<div class="spinner-dot info  " role="status"></div>
<div class="spinner-dot brown" role="status"> </div>

테두리 스피너 사이즈 조절

.spinner-border-sm, .spinner-border-lg, .spinner-border-xl속성을 추가해 스피너의 크기를 조절할 수 있습니다.

<div class="spinner-border spinner-border-sm" role="status"> </div>
<div class="spinner-border" role="status"> </div>
<div class="spinner-border spinner-border-lg" role="status"> </div>
<div class="spinner-border spinner-border-xl" role="status"> </div>

도트 스피너 사이즈 조절

.spinner-dot-sm, .spinner-dot-lg, .spinner-dot-xl속성을 추가해 스피너의 크기를 조절할 수 있습니다.

<div class="spinner-dot spinner-dot-sm" role="status"> </div>
<div class="spinner-dot" role="status"> </div>
<div class="spinner-dot spinner-dot-lg" role="status"> </div>
<div class="spinner-dot spinner-dot-xl" role="status"> </div>