Bootstrap 5 로딩 버튼 예제

오늘 튜토리얼에서는 부트스트랩 5에서 로딩 버튼을 사용하는 방법을 살펴보겠습니다. 이 섹션에서는 스피너 버튼, 비활성화된 로딩 버튼, 글로우 애니메이션 로딩 버튼 및 개요 로딩 버튼을 볼 것입니다. 먼저 부트스트랩 5 프로젝트를 설정해야 합니다. cdn을 사용하거나 아래 기사를 읽을 수 있습니다.

How to install & setup bootstrap 5

view

Bootstrap 5 로딩 버튼 예제

1) 부트스트랩 5 단순 스피너 로딩 버튼.

<button class="btn btn-primary" type="button">
  <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
  Loading...
</button>

2) 로딩 버튼 비활성화.

<button class="btn btn-primary" type="button" disabled>
  <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
  Loading...
</button>

3)다양한 색상의 부트스트랩 5 로딩 버튼.

<button class="btn btn-primary" type="button" disabled>
  <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
  Loading...
</button>
<button class="btn btn-success" type="button" disabled>
  <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
  Loading...
</button>
<button class="btn btn-danger" type="button" disabled>
  <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
  Loading...
</button>
<button class="btn btn-dark" type="button" disabled>
  <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
  Loading...
</button>

4) 부트스트랩 5 성장 애니메이션 로딩 버튼.

<button class="btn btn-primary" type="button" disabled>
  <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
 Loading...
</button>
<button class="btn btn-success" type="button" disabled>
  <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
 Loading...
</button>
<button class="btn btn-danger" type="button" disabled>
  <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
 Loading...
</button>
<button class="btn btn-dark" type="button" disabled>
  <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
 Loading...
</button>

5) 부트스트랩 5 개요 로딩 스피너 버튼.

<button class="btn btn-outline-primary" type="button" disabled>
  <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
  Loading...
</button>
<button class="btn btn-outline-success" type="button" disabled>
  <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
  Loading...
</button>
<button class="btn btn-outline-danger" type="button" disabled>
  <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
  Loading...
</button>
<button class="btn btn-outline-dark" type="button" disabled>
  <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
  Loading...
</button>

6) 부트스트랩 5는 스피너 로딩 버튼만 비활성화했습니다.

<button class="btn btn-primary" type="button" disabled>
  <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
  <span class="visually-hidden">Loading...</span>
</button>
<button class="btn btn-success" type="button" disabled>
  <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
  <span class="visually-hidden">Loading...</span>
</button>
<button class="btn btn-danger" type="button" disabled>
  <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
  <span class="visually-hidden">Loading...</span>
</button>

또한 읽기

Bootstrap 5 Dark Mode Example
Bootstrap 5 File Upload Example
Bootstrap 5 Divider Line Example
Bootstrap 5 Login Form Page Example
Bootstrap 5 Gradient Button Example
Bootstrap 5 Card Slider with Splide JS Example
Bootstrap 5 Responsive Footer Section Example