Bootstrap provides various classes for creating different styles of “spinner” to display the loading state of projects. These classes are inbuilt with HTML and CSS so no need to write any JavaScript to create them. We can also modify the appearance, size, and placement of the spinners with the classes provided by Bootstrap.
Types of Spinner:
-
Border spinner: We can create lightweight bordered spinner using the .spinner-border class as given below.
Syntax:
<div class="spinner-border" role="status">
<span class="sr-only">Loading</span>
</div> -
Example:
HTML
<!DOCTYPE html><html lang="en">
<head>
<title>Bootstrap Spinners</title>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet" href=
<script src=
</script>
<script src=
</script>
<script src=
</script>
</head>
<body>
<center>
<h1 style="color:green;text-align:center;">
GeeksforGeeks
</h1>
<!-- spinner-border -->
<div class="spinner-border" role="status">
<span class="sr-only">Loading</span>
</div>
</center>
</body>
</html>
|
-
Output:
-
Note: We have used the class .spinner-border inside <div> element. 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 makes the container and it’s content visible only on screen-readers.
-
Colored Spinners: 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.
Syntax:
<div class="spinner-border text-primary" role="status">
<span class="sr-only">Loading</span>
</div> -
Example:
HTML
<!DOCTYPE html><html lang="en">
<head>
<title>Bootstrap Spinners</title>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet" href=
<script src=
</script>
<script src=
</script>
<script src=
</script>
</head>
<body>
<center>
<h1 style="color:green;text-align:center;">
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>
</center>
</body>
</html>
|
-
Output:
-
Note: We have used the text color utility instead of border-color utilities because each border spinner specifies a transparent border for at least one side and the border-{color} utilities override that.
- Growing spinner: We can create growing spinner by using .spinner-grow class of Bootstrap. It displays as repeatedly grow.
Syntax:
<div class="spinner-grow" role="status">
<span class="sr-only">Loading</span>
</div> -
Example:
HTML
<!DOCTYPE html><html lang="en">
<head>
<title>Bootstrap Spinners</title>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet" href=
<script src=
</script>
<script src=
</script>
<script src=
</script>
</head>
<body>
<center>
<h1 style="color:green;text-align:center;">
GeeksforGeeks
</h1>
<!-- spinner-grow -->
<div class="spinner-grow" role="status">
<span class="sr-only">Loading</span>
</div>
</center>
</body>
</html>
|
-
Output:
-
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.
-
Colored growing spinner: We can change the color of growing spinner by using text color utility classes of Bootstrap along with the .spinner-grow class as given below.
Syntax:
<div class="spinner-grow text-primary" role="status">
<span class="sr-only">Loading</span>
</div> -
Example:
HTML
<!DOCTYPE html><html lang="en">
<head>
<title>Bootstrap Spinners</title>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet" href=
<script src=
</script>
<script src=
</script>
<script src=
</script>
</head>
<body>
<center>
<h1 style="color:green;text-align:center;">
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>
</center>
</body>
</html>
|
-
Output:
-
Note: The spinner is built with currentColor which is easily change its appearance with text color utilities.
-
Buttons with border spinner: We can place the border spinner within the button with text or without text by using the .spinner-border class within a <span> tag.
Syntax:
<button type="button" class="btn btn-primary" disabled>
<span class="spinner-border spinner-border-sm"
role="status" aria-hidden="true">
</span>
Text
</button>-
Example:
HTML
<!DOCTYPE html><html lang="en">
<head>
<title>Bootstrap Spinners</title>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet" href=
<script src=
</script>
<script src=
</script>
<script src=
</script>
</head>
<body>
<center>
<h1 style="color:green;text-align:center;">
GeeksforGeeks
</h1>
<div class="container">
<button type="button"
class="btn btn-secondary" disabled>
<span class="spinner-border spinner-border-sm"
role="status" aria-hidden="true">
</span>
<span class="sr-only">Loading</span>
</button>
<button type="button"
class="btn btn-primary" disabled>
<span class="spinner-border spinner-border-sm"
role="status" aria-hidden="true">
</span>
Processing...
</button>
</div>
</center>
</body>
</html>
|
-
Output:
-
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.
-
Buttons with growing spinner: We can place the growing spinner within the button with text or without text by using the .spinner-grow class within a <span> tag.
Syntax:
<button type="button" class="btn btn-primary" disabled>
<span class="spinner-grow spinner-grow-sm"
role="status" aria-hidden="true">
</span>
text
</button> -
Example:
HTML
<!DOCTYPE html><html lang="en">
<head>
<title>Bootstrap Spinners</title>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet" href=
<script src=
</script>
<script src=
</script>
<script src=
</script>
</head>
<body>
<center>
<h1 style="color:green;text-align:center;">
GeeksforGeeks
</h1>
<div class="container">
<button type="button"
class="btn btn-secondary" disabled>
<span class="spinner-grow spinner-grow-sm"
role="status" aria-hidden="true">
</span>
<span class="sr-only">Loading</span>
</button>
<button type="button"
class="btn btn-primary" disable>
<span class="spinner-grow spinner-grow-sm"
role="status" aria-hidden="true">
</span>
Processing...
</button>
</div>
</center>
</body>
</html>
|
-
Output:
- 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.
Changing the size:
-
Using class: We can change the size using the classes .spinner-border-sm and .spinner-grow-sm along with the .spinner-border and .spinner-grow classes.
The list of size classes are given below:- sm
- md
- lg
-
Using CSS: We can also change the size of spinner using CSS styling as given below.
Example:
HTML
<!DOCTYPE html><html lang="en">
<head>
<title>Bootstrap Spinners</title>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet" href=
<script src=
</script>
<script src=
</script>
<script src=
</script>
</head>
<body>
<center>
<div class="container">
<h1 style="color:green;text-align:center;">
GeeksforGeeks
</h1>
<div class="spinner-border text-primary"
role="status" style="height:5rem; width:5rem;">
<span class="sr-only">Loading</span>
</div>
<div class="spinner-grow text-primary"
role="status" style="height:5rem; width:5rem;">
<span class="sr-only">Loading</span>
</div>
</div>
</center>
</body>
</html>
|
-
Output:
Changing the alignment:
-
Using text alignment utilities: We can change the alignment of the spinner by placing it inside <div> tag which uses text alignment utility class to control the alignment of children elements as given below.
Example:
HTML
<!DOCTYPE html><html lang="en">
<head>
<title>Bootstrap Spinners</title>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet" href=
<script src=
</script>
<script src=
</script>
<script src=
</script>
</head>
<body>
<div class="container">
<h1 style="color:green;text-align:center;">
GeeksforGeeks
</h1>
<!-- Changing alignment using text utilities class -->
<div class="text-center">
<div class="spinner-border text-primary"
role="status">
<span class="sr-only">Loading</span>
</div>
</div>
</div>
</body>
</html>
|
-
Output:
-
Using float utilities: We can change the alignment of spinner by placing it inside the <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.
Example:
HTML
<!DOCTYPE html><html lang="en">
<head>
<title>Bootstrap Spinners</title>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet" href=
<script src=
</script>
<script src=
</script>
<script src=
</script>
</head>
<body>
<div class="container">
<h1 style="color:green;text-align:center;">
GeeksforGeeks
</h1>
<!-- Changing alignment using text utilities class -->
<div class="clearfix float-right">
<div class="spinner-border text-primary"
role="status">
<span class="sr-only">Loading</span>
</div>
</div>
</div>
</body>
</html>
|
-
Output:
-
Using flexbox utilities: We can change the alignment of the spinner by placing it inside <div> element which uses flexbox utility class to control the alignment of children elements as given below.
Example:
HTML
<!DOCTYPE html><html lang="en">
<head>
<title>Bootstrap Spinners</title>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet" href=
<script src=
</script>
<script src=
</script>
<script src=
</script>
</head>
<body>
<div class="container">
<h1 style="color:green;text-align:center;">
GeeksforGeeks
</h1>
<!-- Changing alignment using text utilities class -->
<div class="d-flex justify-content-center">
<div class="spinner-border text-primary"
role="status">
<span class="sr-only">Loading</span>
</div>
</div>
</div>
</body>
</html>
|
-
Output:
Supported Browsers:
- Google Chrome
- Internet Explorer
- Firefox
- Opera
- Safari