Bootstrap | Spinners Set-1
Last Updated :
28 Apr, 2022
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.
HTML
<!DOCTYPE html>
<html>
<head>
<!-- Bootstrap CSS -->
<link rel="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;
}
</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.
HTML
<!DOCTYPE html>
<html>
<head>
<!-- Bootstrap CSS -->
<link rel="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>
<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.
HTML
<!DOCTYPE html>
<html>
<head>
<!-- Bootstrap CSS -->
<link rel="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>
<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.
HTML
<!DOCTYPE html>
<html>
<head>
<!-- Bootstrap CSS -->
<link rel="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>
<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
Similar Reads
Bootstrap Progress Bar and Jumbotron BootStrap articles : Introduction and Installation Grid System Buttons, Glyphicons, Tables Vertical Forms, Horizontal Forms, Inline Forms DropDowns and Responsive Tabs Progress Bar We all have seen a progress bar while executing some process in our computer. A progress bar shows how much of the proc
2 min read
Bootstrap Alerts , Wells, Pagination and Pager Introduction and InstallationGrid SystemButtons, Glyphicons, TablesVertical Forms, Horizontal Forms, Inline FormsDropDowns and Responsive TabsProgress Bar and Jumbotron Alerts: We often see certain alerts on some websites before or after completing an action. These alert messages are highlighted tex
4 min read
Bootstrap Badges, Labels, Page Headers Introduction and InstallationButtons, Glyphicons, TablesVertical Forms, Horizontal Forms, Inline FormsDropDowns and Responsive TabsProgress Bar and Jumbotron Badges: We all have seen some numerical indicators beside some links on various websites. These are called badges. These badges tell how many
3 min read
Bootstrap Tooltips In this article, we would be discussing the tooltip plugin provided by bootstrap. Tooltip is quite useful for showing the description of different elements in the webpage. Tooltip can be invoked on any element in a webpage. Tooltips on bootstrap depends on the 3rd party library Tether for positionin
4 min read
Bootstrap Navigation Bar Bootstrap Navigation Bar provides a responsive, customizable, and pre-styled navigation component for web applications. It incorporates features like branding, navigation links, dropdowns, and responsiveness, enabling developers to create effective and visually appealing navigation menus effortlessl
6 min read
Bootstrap Carousel Bootstrap Carousel enables slideshow functionality for images or content. Easily customizable with CSS and JavaScript. Supports responsive design and touch gestures, enhancing user experience in web development projects. It can be included in your webpage using "bootstrap.js" or "bootstrap.min.js".
4 min read
Bootstrap Cards A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options. It replaces the use of panels, wells and thumbnails. All of it can be used in a single container called card . Ba
2 min read
Bootstrap | Badges and Breadcrumbs Badges: Badges are numbers associated with the link to indicate the number of items associated with the link. The notification number is seen when logged in to a particular website and tells the numbers of news or notifications to see by clicking it. Example: HTML <!DOCTYPE html> <html>
4 min read
Clearfix in Bootstrap One of the major problems with the structure of HTML is that if you have a child div inside parent div, the child div automatically flows around the parent div. The solution to this problem is using clear property of CSS. Bootstrap allows us to use a class named clearfix which is used to clear the f
2 min read
Image Replacement in Bootstrap using text-hide Class Bootstrap allows us to replace the text with background image for any text element like paragraph element, heading element etc. With the use of .text-hide class, we can replace an element’s content with a background image. Syntax: <element class = "text-hide" style = "background-image: url('Speci
1 min read