Bootstrap 5 Spinners Buttons

Bootstrap 5 Spinners are used to display the loading state of a component or a page. The spinners within buttons are used to represent an action that is currently processing.

Spinners Buttons used Classes:

.btn: It is used to create a button.
.spinner-border: It is used to create a spinner with the border.
.spinner-grow: It is used to create a grow and shrink spinner.

Syntax:

<button class="btn btn-*" type="button">
      <span class="spinner-border spinner-border-*" 
          role="status" aria-hidden="true"></span>
      <span class="visually-hidden">...</span>
</button>

Example 1: In this example, we will create loading spinner buttons with some text.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Bootstrap 5 Spinners Buttons</title> 
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" 
        rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
        crossorigin="anonymous"> 
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" 
        crossorigin="anonymous"> 
    </script> 
</head> 
  
<body> 
    <div class="container text-center"> 
        <h1 class="text-success"> 
            w3wiki 
        </h1> 
  
        <h3>Bootstrap 5 Spinners Buttons</h3> 
  
        <button class="btn btn-success" type="button"> 
            <span class="spinner-grow text-white  
                spinner-grow-sm" role="status"></span> 
            Loading... 
        </button> 
  
        <button class="btn btn-success" type="button"> 
            <span class="spinner-border spinner-border-sm" 
                role="status"></span> 
            Loading... 
        </button> 
    </div> 
</body> 
  
</html>

Output:

Example 2: In this example, we will create loading spinner buttons. in different colors and sizes.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Bootstrap 5 Spinners Buttons</title> 
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" 
        rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
        crossorigin="anonymous"> 
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" 
        crossorigin="anonymous"> 
    </script> 
</head> 
  
<body> 
    <div class="container text-center"> 
        <h1 class="text-success"> 
            w3wiki 
        </h1> 
  
        <h3>Bootstrap 5 Spinners Buttons</h3> 
  
        <button class="btn btn-danger" type="button"> 
            <span class="spinner-grow text-white  
                spinner-grow-md" role="status"></span> 
            <span class="visually-hidden">Loading...</span> 
        </button> 
  
        <button class="btn btn-success" type="button"> 
            <span class="spinner-border spinner-border-md" 
                role="status"></span> 
            <span class="visually-hidden">Loading...</span> 
        </button> 
    </div> 
</body> 
  
</html>

Output:

Reference: https://getbootstrap.com/docs/5.0/components/spinners/#buttons

HTML

HTML

Contact Us