bootstrap 5 loading button example

Bootstrap 5 Loading Button Example

updated 25/09/22 By frontendshape

In today’s tutorial, we will see how to use loading button in bootstrap 5. For this section we will see spinner button, disabled loading button, glow animation loading button and outline loading button. first you need to setup bootstrap 5 project. you can use cdn or read below article.

How to install & setup bootstrap 5


Bootstrap 5 Loading Button Example

1. Bootstrap 5 simple spinner loading button.

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

bootstrap 5 spinner loading button

2. Disabled loading button.

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


3. Bootstrap 5 loading button with many color.

<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>
bootstrap 5 loading button colors

bootstrap 5 loading button colors

4. Bootstrap 5 grow animation loading button.

<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> 
bootstrap 5 glow loading button

bootstrap 5 glow loading button

5. Bootstrap 5 outline loading spinner button.

<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>
bootstrap 5 outline loading button

bootstrap 5 outline loading button

6. Bootstrap 5 disabled only spinner loading button.

<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 spinner icon button only

bootstrap 5 spinner icon button only