Bootstrap 5 Spinners Buttons
Last Updated :
09 Nov, 2022
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 >
rel = "stylesheet"
integrity = "sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin = "anonymous" >
integrity = "sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin = "anonymous" >
</ script >
</ head >
< body >
< div class = "container text-center" >
< h1 class = "text-success" >
GeeksforGeeks
</ 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 >
rel = "stylesheet"
integrity = "sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin = "anonymous" >
integrity = "sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin = "anonymous" >
</ script >
</ head >
< body >
< div class = "container text-center" >
< h1 class = "text-success" >
GeeksforGeeks
</ 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
Share your thoughts in the comments
Please Login to comment...