Bootstrap 5 Spinners Size
Last Updated :
09 Nov, 2022
Bootstrap 5 Spinners Size is used to create spinners in different sizes. For small-size spinners, we will use .spinner-border-sm class, and for small-size grow to shrink spinners, we will use .spinner-grow-sm class.
Spinners Size used Classes:
- .spinner-border-sm: It is used to create small-size spinners.
- .spinner-border-md: It is used to create medium size spinners.
- .spinner-grow-sm: It is used to create small-size grow shrink spinners.
- .spinner-grow-md: It is used to create medium size grow shrink spinners.
Note: We can use customized CSS styles for different-size spinners.
Syntax:
<div class="spinner-border spinner-border-sm"
role="status">
<span class="visually-hidden">Loading...</span>
</div>
Example 1: In this example, we will create different sizes of spinners.
HTML
<!DOCTYPE html>
< html >
< head >
< title >Bootstrap 5 Spinners Size</ 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 >
< h2 >Bootstrap 5 Spinners Size</ h2 >
< div class = "spinner-border spinner-border-sm"
role = "status" >
< span class = "visually-hidden" >Loading...</ span >
</ div >
< div class = "spinner-grow spinner-grow-sm" role = "status" >
< span class = "visually-hidden" >Loading...</ span >
</ div >
< div class = "spinner-border spinner-border-md" role = "status" >
< span class = "visually-hidden" >Loading...</ span >
</ div >
< div class = "spinner-grow spinner-grow-md" role = "status" >
< span class = "visually-hidden" >Loading...</ span >
</ div >
< div class = "spinner-border"
style = "width: 3rem; height: 3rem;"
role = "status" >
< span class = "visually-hidden" >Loading...</ span >
</ div >
< div class = "spinner-grow"
style = "width: 3rem; height: 3rem;" role = "status" >
< span class = "visually-hidden" >Loading...</ span >
</ div >
</ div >
</ body >
</ html >
|
Output:
Example 2: In this example, we will create different sizes of button spinners in different colors.
HTML
<!DOCTYPE html>
< html >
< head >
< title >Bootstrap 5 Spinners Size</ 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 >
< h2 >Bootstrap 5 Spinners Size</ h2 >
< button class = "btn btn-success" type = "button" >
< span class="spinner-grow text-white
spinner-grow-sm" role = "status" ></ span >
< span class = "visually-hidden" >Loading...</ span >
</ button >
< button class = "btn btn-success" type = "button" >
< span class = "spinner-border spinner-border-sm"
role = "status" ></ span >
< span class = "visually-hidden" >Loading...</ span >
</ button >
< br >< br >
< button class = "btn btn-primary" 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-primary" 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/#size
Share your thoughts in the comments
Please Login to comment...