학원/BS(부트스트랩4)
11/15 43-5 [BS] Spinners
도원결의
2022. 11. 15. 18:45
버튼의 로딩표시 !!!! 이거도 움직이는건데 구현 안됨....
1. Spinners 기본 : div에 spinner-border로 적용
<h2>Spinners</h2>
<div class="d-inline-flex align-items-center"> <!---글자를 가운데에 배치하기 !-->
<div class="spinner-border mr-2"></div>
<div>다운로드 중...</div>
</div>
2. Colored Spinners 색깔도 당연 입힐 수 있음 근데 좀 특이함 text-색깔명 으로 입힘 !!
<h2>Colored Spinners</h2>
<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>
3.Growing Spinners 모양이 커졌다 작아졌다로도 가능 !! spinner-grow 로 적용
<h2>Growing Spinners</h2>
<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>
4. Spinner Size 사이즈 조절도 가능합니다. 뒤에 sm,lg만 추가 !
<h2>Spinner Size</h2>
<div class="d-inline-flex align-items-center">
<div class="spinner-border spinner-border-lg mr-2"></div>
<div>다운로드 중...</div>
</div>
<div class="d-inline-flex align-items-center">
<div class="spinner-grow spinner-grow-sm mr-2"></div>
<div>다운로드 중...</div>
</div>