Bootstrap provides us with various classes for creating different styles of the spinner to indicate the loading state. We can also modify the appearance, size, and placement of the spinners with the classes provided by Bootstrap.
Types of Spinners:
- Border spinner: We can create a lightweight bordered spinner using the class spinner-border as given below.
<!DOCTYPE html><html>
<head>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href=
integrity=
"sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<title>Bootstrap | Spinner</title>
<style>
h1 {
color: green;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<h1>GeeksForGeeks</h1>
<!-- spinner-border, #1 -->
<div class="spinner-border" role="status">
<span class="sr-only">Loading</span>
</div>
<!-- spinner-border, #2 -->
<div class="spinner-border" role="status">
<span class="sr-only">Loading</span>
</div>
<!-- spinner-border, #3 -->
<div class="spinner-border" role="status">
<span class="sr-only">Loading</span>
</div>
</div>
</body>
</html>
|
Note: We have used the class spinner-border inside <div>. We have used the role=”status” attribute-value pair inside the <div> for accessibility purposes and a <span> tag with class=”sr-only”, which is a Bootstrap class which make the container and its content visible only on screen-readers.
Output:
- Colored border spinner: We can change the color of the border spinner using text color utility classes of Bootstrap along with the spinner-border class as given below.
<!DOCTYPE html><html>
<head>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href=
integrity=
"sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<title>Bootstrap | Spinner</title>
<style>
h1 {
color: green;
text-align: center;
}
div {
margin-top: 10px;
}
</style>
</head>
<body>
<div class="container">
<h1>GeeksForGeeks</h1>
<!-- spinner-border, #1 -->
<div class="spinner-border text-primary" role="status">
<span class="sr-only">Loading</span>
</div>
<!-- spinner-border, #2 -->
<div class="spinner-border text-secondary" role="status">
<span class="sr-only">Loading</span>
</div>
<!-- spinner-border, #3 -->
<div class="spinner-border text-success" role="status">
<span class="sr-only">Loading</span>
</div>
<!-- spinner-border, #4 -->
<div class="spinner-border text-danger" role="status">
<span class="sr-only">Loading</span>
</div>
<!-- spinner-border, #5 -->
<div class="spinner-border text-warning" role="status">
<span class="sr-only">Loading</span>
</div>
<!-- spinner-border, #6 -->
<div class="spinner-border text-info" role="status">
<span class="sr-only">Loading</span>
</div>
<!-- spinner-border, #7 -->
<div class="spinner-border text-light" role="status">
<span class="sr-only">Loading</span>
</div>
<!-- spinner-border, #8 -->
<div class="spinner-border text-dark" role="status">
<span class="sr-only">Loading</span>
</div>
</div>
</body>
</html>
|
Note: We have used the class spinner-border inside <div>. We have used the role=”status” attribute-value pair inside the <div> for accessibility purposes and a <span> tag with class=”sr-only”, which is a Bootstrap class which make the container and its content visible only on screen-readers.
Output:
- Growing spinner: We can create a growing spinner by using a spinner-grow class of Bootstrap as given below.
<!DOCTYPE html><html>
<head>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href=
integrity=
"sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<title>Bootstrap | Spinner</title>
<style>
h1 {
color: green;
text-align: center;
}
div {
margin-top: 10px;
}
</style>
</head>
<body>
<div class="container">
<h1>GeeksForGeeks</h1>
<!-- spinner-grow, #1 -->
<div class="spinner-grow" role="status">
<span class="sr-only">Loading</span>
</div>
</div>
</body>
</html>
|
Note: We have used the class spinner-grow inside <div>. We have used the role=”status” attribute-value pair inside the <div> for accessibility purposes and a <span> tag with class=”sr-only”, which is a Bootstrap class which make the container and its content visible only on screen-readers.
Output:
- Colored growing spinner: We can change the color of the growing spinner using text color utility classes of Bootstrap along with the spinner-grow class as given below.
<!DOCTYPE html><html>
<head>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href=
integrity=
"sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<title>Bootstrap | Spinner</title>
<style>
h1 {
color: green;
text-align: center;
}
div {
margin-top: 10px;
}
</style>
</head>
<body>
<div class="container">
<h1>GeeksForGeeks</h1>
<!-- spinner-grow, #1 -->
<div class="spinner-grow text-primary" role="status">
<span class="sr-only">Loading</span>
</div>
<!-- spinner-grow, #2 -->
<div class="spinner-grow text-secondary" role="status">
<span class="sr-only">Loading</span>
</div>
<!-- spinner-grow, #3 -->
<div class="spinner-grow text-success" role="status">
<span class="sr-only">Loading</span>
</div>
<!-- spinner-grow, #4 -->
<div class="spinner-grow text-danger" role="status">
<span class="sr-only">Loading</span>
</div>
<!-- spinner-grow, #5 -->
<div class="spinner-grow text-warning" role="status">
<span class="sr-only">Loading</span>
</div>
<!-- spinner-grow, #6 -->
<div class="spinner-grow text-info" role="status">
<span class="sr-only">Loading</span>
</div>
<!-- spinner-grow, #7 -->
<div class="spinner-grow text-light" role="status">
<span class="sr-only">Loading</span>
</div>
<!-- spinner-grow, #8 -->
<div class="spinner-grow text-dark" role="status">
<span class="sr-only">Loading</span>
</div>
</div>
</body>
</html>
|
Note: We have used the class spinner-grow inside <div>. We have used the role=”status” attribute-value pair inside the <div> for accessibility purposes and a <span> tag with class=”sr-only”, which is a Bootstrap class which make the container and its content visible only on screen-readers.
Output:
Supported Browser:
- Google Chrome
- Microsoft Edge
- Firefox
- Opera
- Safari