Bootstrap Spinners Tutorial with Examples
1. Bootstrap Spinner
No ADS
You can use Bootstrap Spinner to display the loading state of an application, or any other process. The Bootstrap Spinner is built only with HTML and CSS. Therefore, you don't need Javascript to create it but it is possible that you need some Javascript to control hiding or displaying it.
The simplest way for creating a Spinner:
<!-- Spinner -->
<div class="spinner-border"></div>
Create a Spinner friendly with a Screen Reader:
Spinner
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
role = "status" | Notify to Screen Reader that this is an element describing the process (state) of job. |
<span class="sr-only">
Loading... </span> | This is an element hidden in normal devices, but it can be detected by Screen Reader. |
TheSpinner types of Bootstrap:
.spinner-border / .spinner-grow
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow" role="status">
<span class="sr-only">Loading...</span>
</div>
See the full example:
spinners-example.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Spinner Example</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h4 class="mb-4 mt-2">spinner-border</h4>
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
<h4 class="mb-4 mt-2">.spinner-grow</h4>
<div class="spinner-grow" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>
2. Spinner and Color
No ADS
Using Text Color utility classes, you can establish colors for Spinner.
- .text-primary
- .text-secondary
- .text-success
- .text-danger
- .text-warning
- .text-info
- .text-light
- .text-dark
- .text-body
- .text-muted
- .text-white
- .text-black-50
- .text-white-50
.spinner-border
<div class="spinner-border text-primary" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-secondary" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-success" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-danger" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-warning" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-info" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-light" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-dark" role="status">
<span class="sr-only">Loading...</span>
</div>
.spinner-grow
<div class="spinner-grow text-primary" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-secondary" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-success" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-danger" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-warning" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-info" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-light" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-dark" role="status">
<span class="sr-only">Loading...</span>
</div>
3. Size of Spinner
Add the .spinner-border-sm class or .spinner-grow-sm class to a Spinner, which helps it a bit smaller. This is necessary if you want to put your Spinner into a certain component, such as Button.
<div class="spinner-border spinner-border-sm" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow spinner-grow-sm" role="status">
<span class="sr-only">Loading...</span>
</div>
Add .spinner-border-lg class or .spinner-grow-lg class to a Spinner If you want Spinner to be a little bigger.
<div class="spinner-border spinner-border-lg" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow spinner-grow-lg" role="status">
<span class="sr-only">Loading...</span>
</div>
You can also customize Spinner size through CSS:
<div class="spinner-border" style="width: 5rem; height: 5rem;" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow" style="width: 5rem; height: 5rem;" role="status">
<span class="sr-only">Loading...</span>
</div>
4. Spinner in a Button
No ADS
Place Spinners inside a Button or a component.
<button class="btn btn-primary" type="button" disabled>
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
<span class="sr-only">Loading...</span>
</button>
<button class="btn btn-primary" type="button" disabled>
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
Loading...
</button>
<button class="btn btn-primary" type="button" disabled>
<span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
<span class="sr-only">Loading...</span>
</button>
<button class="btn btn-primary" type="button" disabled>
<span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
Loading...
</button>
5. Placement
Use a few utility classes in Bootstrap to set up the position for Spinners:
spinner-placement-example.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Spinner Example</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<style>
.my-box {
height: 50px;
padding: 5px;
margin: 10px 0 5px 0;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="container-fluid">
<h4>Flex</h4>
<div class="my-box d-flex justify-content-center">
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
<div class="my-box d-flex align-items-center">
<span>Loading...</span>
<div class="spinner-border ml-auto" role="status" aria-hidden="true"></div>
</div>
<h4>Float</h4>
<div class="my-box">
<div class="spinner-border float-right" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
<h4>Text Align</h4>
<div class="my-box text-center">
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>
See Also:
- Bootstrap Float
- Học Bootstrap Typography
No ADS
Bootstrap Tutorials
- Bootstrap Jumbotron Tutorial with Examples
- Bootstrap Dropdowns Tutorial with Examples
- Bootstrap Alerts Tutorial with Examples
- Bootstrap Buttons Tutorial with Examples
- Bootstrap Button Group Tutorial with Examples
- Bootstrap Popovers (Tooltips) Tutorial with Examples
- Bootstrap Spinners Tutorial with Examples
- Introduction to Bootstrap
- Bootstrap Grid System Tutorial with Examples
- Bootstrap Cards Tutorial with Examples
- Bootstrap Containers Tutorial with Examples
- Bootstrap Nav Tab/Pill Tutorial with Examples
- Bootstrap NavBars Tutorial with Examples
- Bootstrap Tables Tutorial with Examples
- Bootstrap Modal Tutorial with Examples
- Bootstrap Forms Tutorial with Examples
- Bootstrap Pagination Tutorial with Examples
- Bootstrap Badges Tutorial with Examples
- Bootstrap Input Group Tutorial with Examples
- Bootstrap List Groups Tutorial with Examples
- Bootstrap ProgressBars Tutorial with Examples
- Bootstrap Collapse and Accordion Tutorial with Examples
- Bootstrap Scrollspy Tutorial with Examples
- Bootstrap Breadcrumb Tutorial with Examples
- Bootstrap Carousel Tutorial with Examples
- Bootstrap Spacing Utilities Tutorial with Examples
- Bootstrap Border Utilities Tutorial with Examples
- Bootstrap Color Utilities Tutorial with Examples
- Bootstrap Text Utilities Tutorial with Examples
- Bootstrap Sizing Utilities Tutorial with Examples
- Bootstrap Position Utilities Tutorial with Examples
- Bootstrap Flex Utilities Tutorial with Examples
- Bootstrap Display Utilities Tutorial with Examples
- Bootstrap Visibility Utilities Tutorial with Examples
- Bootstrap Embed Utilities Tutorial with Examples
Show More