Bootstrap – Spinners
”; Previous Next
This chapter will discuss about Bootstrap spinners. Bootstrap spinner display the loading state of projects using .spinner class.
How it works
Bootstrap spinners show the loading state of a project, using HTML and CSS. JavaScript is not required to build them.
Custom JavaScript is needed to toggle their visibility. Appearance, alignment, and sizing can be easily customized with Bootstrap”s utility classes.
Each loader has role=”status” and a nested <span class=”visually-hidden”>Loading… </span > for accessibility.
Border spinner
Use .spinner-border class to create lightweight spinner/loading indicator.
Example
You can edit and try running this code using Edit & Run option.
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Bootstrap – Spinners</title>
<meta charset=”UTF-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<link href=”https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css” rel=”stylesheet”>
<script src=”https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js”></script>
</head>
<body>
<h3>Border Spinner</h3>
<div class=”spinner-border mt-2″ role=”status”>
<span class=”spinner-grow text-white spinner-grow-sm” role=”status”></span>
<span class=”visually-hidden”></span>
</div>
</body>
</html>
Colors
Border spinner uses currentColor for its border-color, which is customizable with text color utilities. Use text color utilities on a standard spinner.
Example
You can edit and try running this code using Edit & Run option.
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Bootstrap – Spinners</title>
<meta charset=”UTF-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<link href=”https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css” rel=”stylesheet”>
<script src=”https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js”></script>
</head>
<body>
<h3>Colored Spinner</h3>
<div class=”spinner-border text-primary” role=”status”>
<span class=”visually-hidden”></span>
</div>
<div class=”spinner-border text-secondary” role=”status”>
<span class=”visually-hidden”></span>
</div>
<div class=”spinner-border text-success” role=”status”>
<span class=”visually-hidden”></span>
</div>
<div class=”spinner-border text-danger” role=”status”>
<span class=”visually-hidden”></span>
</div>
<div class=”spinner-border text-warning” role=”status”>
<span class=”visually-hidden”></span>
</div>
<div class=”spinner-border text-info” role=”status”>
<span class=”visually-hidden”></span>
</div>
<div class=”spinner-border text-light” role=”status”>
<span class=”visually-hidden”></span>
</div>
<div class=”spinner-border text-dark” role=”status”>
<span class=”visually-hidden”></span>
</div>
</body>
</html>
Why not use border-color utilities? Border spinners have transparent border on one side, overridden by .border-{color} utilities.
Growing spinner
You can change the spin type of spinner to the grow spinner. It technically doesn”t rotate, but it repeatedly grows.
Use .spinner-grow class to create grow spinner.
Example
You can edit and try running this code using Edit & Run option.
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Bootstrap – Spinners</title>
<meta charset=”UTF-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<link href=”https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css” rel=”stylesheet”>
<script src=”https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js”></script>
</head>
<body>
<h3>Growing Spinner</h3>
<div class=”spinner-grow” role=”status”>
<span class=”visually-hidden”></span>
</div>
</body>
</html>
This spinner uses currentColor to change its appearance with text color utilities.
Example
You can edit and try running this code using Edit & Run option.
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Bootstrap – Spinners</title>
<meta charset=”UTF-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<link href=”https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css” rel=”stylesheet”>
<script src=”https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js”></script>
</head>
<body>
<h3>Growing color Spinners</h3>
<div class=”spinner-grow text-primary” role=”status”>
<span class=”visually-hidden”></span>
</div>
<div class=”spinner-grow text-secondary” role=”status”>
<span class=”visually-hidden”></span>
</div>
<div class=”spinner-grow text-info” role=”status”>
<span class=”visually-hidden”></span>
</div>
<div class=”spinner-grow text-dark” role=”status”>
<span class=”visually-hidden”></span>
</div>
<div class=”spinner-grow text-warning” role=”status”>
<span class=”visually-hidden”></span>
</div>
<div class=”spinner-grow text-success” role=”status”>
<span class=”visually-hidden”></span>
</div>
<div class=”spinner-grow text-light” role=”status”>
<span class=”visually-hidden”></span>
</div>
<div class=”spinner-grow text-danger” role=”status”>
<span class=”visually-hidden”></span>
</div>
<div class=”spinner-grow” role=”status”>
<span class=”visually-hidden”></span>
</div>
</body>
</html>
Alignment
Bootstrap spinners are designed with rems, currentColor, and display: inline-flex. They are easily resizable, recolorable, and alignable.
Margin
For simple spacing, use margin utilities like .m-4.
Example
You can edit and try running this code using Edit & Run option.
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Bootstrap – Spinners</title>
<meta charset=”UTF-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<link href=”https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css” rel=”stylesheet”>
<script src=”https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js”></script>
</head>
<body>
<h3>Margin</h3>
<div class=”spinner-border m-4″ role=”status”>
<span class=”visually-hidden”></span>
</div>
</body>
</html>
Placement
Bootstrap spinners can be placed using flexbox utilities, float utilities, or text alignment utilities.
Flex
Use flexbox placement classes to set the position of spinners.
Example
You can edit and try running this code using Edit & Run option.
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Bootstrap – Spinners</title>
<meta charset=”UTF-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<link href=”https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css” rel=”stylesheet”>
<script src=”https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js”></script>
</head>
<body>
<h5 class=”text-center”>Flex placement at start, center, end</h5>
<div class=”d-flex justify-content-start”>
<div class=”spinner-border” role=”status”>
<span class=”visually-hidden”></span>
</div>
</div>
<div class=”d-flex justify-content-center”>
<div class=”spinner-border” role=”status”>
<span class=”visually-hidden”></span>
</div>
</div>
<div class=”d-flex justify-content-end”>
<div class=”spinner-border” role=”status”>
<span class=”visually-hidden”></span>
</div>
</div>
</body>
</html>
You can change spinner alignment using flexbox placement.
Example
You can edit and try running this code using Edit & Run option.
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Bootstrap – Spinners</title>
<meta charset=”UTF-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<link href=”https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css” rel=”stylesheet”>
<script src=”https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js”></script>
</head>
<body>
<div class=”d-flex align-items-end mt-2″>
<h5 class=”text-center”>Flex placement</h5>
<div class=”spinner-border ms-auto” role=”status” aria-hidden=”true”></div>
</div>
</body>
</html>
Float
Use float placement classees to set the position of spinners.
Example
You can edit and try running this code using Edit & Run option.
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Bootstrap – Spinners</title>
<meta charset=”UTF-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<link href=”https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css” rel=”stylesheet”>
<script src=”https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js”></script>
</head>
<body>
<h5>Float placement at start and end</h5>
<div class=”clearfix float-start mt-2″>
<div class=”spinner-border” role=”status”>
<span class=”visually-hidden”></span>
</div>
</div>
<div class=”clearfix float-end”>
<div class=”spinner-border” role=”status”>
<span class=”visually-hidden”></span>
</div>
</div>
</body>
</html>
Text align
Use .text-align placement classes to set the position of spinners items.
Example
You can edit and try running this code using Edit & Run option.
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Bootstrap – Spinners</title>
<meta charset=”UTF-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<link href=”https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css” rel=”stylesheet”>
<script src=”https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js”></script>
</head>
<body>
<h5 class=”text-center”>Text Align at start, center, end</h5>
<div class=”text-start”>
<div class=”spinner-border” role=”status”>
<span class=”visually-hidden”></span>
</div>
</div>
<div class=”text-center”>
<div class=”spinner-border” role=”status”>
<span class=”visually-hidden”></span>
</div>
</div>
<div class=”text-end”>
<div class=”spinner-border” role=”status”>