Bootstrap 5 로더

로드러

스피너/로드러를 생성하려면 다음을 사용하세요: .스피너-border 분류:

예제

<div class="스피너-border"></div>

직접 테스트해 보세요

컬러 로드러

스피너에 어떤 텍스트 색상을 추가하려면 utilites를 사용하세요:

예제

<div class="스피너-border 텍스트-미들트"></div>
<div class="스피너-border 텍스트-prim러리"></div>
<div class="스피너-border 텍스트-녹색"></div>
<div class="스피너-border 텍스트-정보"></div>
<div class="스피너-border 텍스트-주황"></div>
<div class="스피너-border 텍스트-빨강"></div>
<div class="스피너-border 텍스트-서좌"></div>
<div class="스피너-border 텍스트-다크"></div>
<div class="스피너-border 텍스트-라이트"></div>

직접 테스트해 보세요

성장 로드러

스피너/로드러가 "회전" 대신 "성장"하도록 원한다면, 다음을 사용하세요: .스피너-grow 분류:

예제

<div class="스피너-grow 텍스트-미들트"></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>

직접 테스트해 보세요

로드어이 크기

사용하세요 .spinner-border-sm 또는 .spinner-grow-sm 더 작은 로드어이를 만들기:

예제

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

직접 테스트해 보세요

로드어이 버튼

버튼에 로드어이를 추가할 수도 있으며, 텍스트가 있든 없든 됩니다:

예제

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

직접 테스트해 보세요