Bootstrap | Spinners Set-2
Bootstrap provides us with various classes for creating different styles of spinner to indicate the loading state. We can also modify the appearance, size and placement of the spinners with the classes provided by Bootstrap.
- Buttons with border spinner: We can place the border spinner within the button by using the spinner-border class within a <span> tag which is in turn nested inside a <button> tag having Bootstrap Button classes as given below.
<!DOCTYPE html><html><head><!-- Bootstrap CSS --><linkrel="stylesheet"href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"crossorigin="anonymous"><title>Bootstrap | Spinner</title><style>h1 {color: green;text-align: center;}div {margin-top: 10px;}</style></head><body><divclass="container"><h1>GeeksForGeeks</h1><buttontype="button"class="btn btn-secondary"disabled><spanclass="spinner-border spinner-border-sm"role="status"aria-hidden="true"></span><spanclass="sr-only">Loading</span></button><buttontype="button"class="btn btn-primary"disabled><spanclass="spinner-border spinner-border-sm"role="status"aria-hidden="true"></span>Processing...</button></div></body></html>Note: We have placed “disabled” attribute within the <button> tag to deactivate it and used “role” and “aria-hidden” attributes within <span> tag for accessibility purposes.
Output:
- Buttons with growing spinner: We can place the growing spinner within the button by using the spinner-grow class within a <span> tag which is in turn nested inside a <button> tag having Bootstrap Button classes as given below.
<!DOCTYPE html><html><head><!-- Bootstrap CSS --><linkrel="stylesheet"href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"crossorigin="anonymous"><title>Bootstrap | Spinner</title><style>h1 {color: green;text-align: center;}div {margin-top: 10px;}</style></head><body><divclass="container"><h1>GeeksForGeeks</h1><buttontype="button"class="btn btn-secondary"disabled><spanclass="spinner-grow spinner-grow-sm"role="status"aria-hidden="true"></span><spanclass="sr-only">Loading</span></button><buttontype="button"class="btn btn-primary"disabled><spanclass="spinner-grow spinner-grow-sm"role="status"aria-hidden="true"></span>Processing...</button></div></body></html>Note: We have placed “disabled” attribute within the <button> tag to deactivate it and used “role” and “aria-hidden” attributes within <span> tag for accessibility purposes.
Output:
Changing the size
- Using class: We can make the spinner smaller using the classes spinner-border-sm and spinner-grow-sm along with the spinner-border and spinner-grow classes, respectively, as given below.
<!DOCTYPE html><html><head><!-- Bootstrap CSS --><linkrel="stylesheet"href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"crossorigin="anonymous"><title>Bootstrap | Spinner</title><style>h1 {color: green;text-align: center;}div {margin-top: 10px;}</style></head><body><divclass="container"><h1>GeeksForGeeks</h1><!-- spinner-border-sm --><divclass="spinner-border text-primary spinner-border-sm"role="status"><spanclass="sr-only">Loading</span></div><!-- spinner-grow-sm --><divclass="spinner-grow text-primary spinner-grow-sm"role="status"><spanclass="sr-only">Loading</span></div></div></body></html>Output:
- Using CSS: We can also change the size of spinner using CSS styling as given below.
<!DOCTYPE html><html><head><!-- Bootstrap CSS --><linkrel="stylesheet"href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"crossorigin="anonymous"><title>Bootstrap | Spinner</title><style>h1 {color: green;text-align: center;}div {margin-top: 10px;}</style></head><body><divclass="container"><h1>GeeksForGeeks</h1><divclass="spinner-border text-primary"role="status"style="height:5rem; width:5rem;"><spanclass="sr-only">Loading</span></div><divclass="spinner-grow text-primary"role="status"style="height:5rem; width:5rem;"><spanclass="sr-only">Loading</span></div></div></body></html>Output:
Changing the alignment
- Using text alignment utilities: We can change the alignment of spinner by placing it inside <div> tag which uses text alignment utilities class to control the alignment of children elements as given below.
<!DOCTYPE html><html><head><!-- Bootstrap CSS --><linkrel="stylesheet"href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"crossorigin="anonymous"><title>Bootstrap | Spinner</title><style>h1 {color: green;text-align: center;}div {margin-top: 10px;}</style></head><body><divclass="container"><h1>GeeksForGeeks</h1><!-- Changing alignment using text utilities class --><divclass="text-center"><divclass="spinner-border text-primary"role="status"><spanclass="sr-only">Loading</span></div></div></div></body></html>Output:
- Using float utilities: We can change the alignment of spinner by placing it inside <div> tag which uses float utilities class to control the alignment of children elements or use the float utilities class directly within the <div> tag through which spinner is created as given below.
<!DOCTYPE html><html><head><!-- Bootstrap CSS --><linkrel="stylesheet"href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"crossorigin="anonymous"><title>Bootstrap | Spinner</title><style>h1 {color: green;text-align: center;}div {margin-top: 10px;}</style></head><body><divclass="container"><h1>GeeksForGeeks</h1><!-- Changing alignment using text utilities class --><divclass="clearfix float-right"><divclass="spinner-border text-primary"role="status"><spanclass="sr-only">Loading</span></div></div></div></body></html>Output:
- Using flexbox utilities: We can change the alignment of spinner by placing it inside <div> tag which uses flexbox utilities class to control the alignment of children elements as given below.
<!DOCTYPE html><html><head><!-- Bootstrap CSS --><linkrel="stylesheet"href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"crossorigin="anonymous"><title>Bootstrap | Spinner</title><style>h1 {color: green;text-align: center;}div {margin-top: 10px;}</style></head><body><divclass="container"><h1>GeeksForGeeks</h1><!-- Changing alignment using text utilities class --><divclass="d-flex justify-content-center"><divclass="spinner-border text-primary"role="status"><spanclass="sr-only">Loading</span></div></div></div></body></html>Output:
