Bootstrap spinners, built entirely with HTML, CSS, and no JavaScript.
Use the border spinners for a lightweight loading indicator.
<!doctype html>
<html lang ="en" >
<head >
<meta charset ="utf-8" >
<meta name ="viewport" content ="width=device-width, initial-scale=1" >
<link href ="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel ="stylesheet" >
<link href ="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel ="stylesheet" >
<title > Bootstrap Example</title >
<script src ="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" > </script >
</head >
<body class ="p-3 m-0 border-0 bd-example" >
<div class ="spinner-border" role ="status" >
<span class ="visually-hidden" > Loading...</span >
</div >
</body >
</html >
The border spinner uses currentColor for its border-color, Which means you can customize the color with text color utilities.
<!doctype html>
<html lang ="en" >
<head >
<meta charset ="utf-8" >
<meta name ="viewport" content ="width=device-width, initial-scale=1" >
<link href ="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel ="stylesheet" >
<link href ="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel ="stylesheet" >
<title > Bootstrap Example</title >
<script src ="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" > </script >
</head >
<body class ="p-3 m-0 border-0 bd-example" >
<div class ="spinner-border text-primary" role ="status" >
<span class ="visually-hidden" > Loading...</span >
</div >
<div class ="spinner-border text-secondary" role ="status" >
<span class ="visually-hidden" > Loading...</span >
</div >
<div class ="spinner-border text-success" role ="status" >
<span class ="visually-hidden" > Loading...</span >
</div >
<div class ="spinner-border text-danger" role ="status" >
<span class ="visually-hidden" > Loading...</span >
</div >
<div class ="spinner-border text-warning" role ="status" >
<span class ="visually-hidden" > Loading...</span >
</div >
<div class ="spinner-border text-info" role ="status" >
<span class ="visually-hidden" > Loading...</span >
</div >
<div class ="spinner-border text-light" role ="status" >
<span class ="visually-hidden" > Loading...</span >
</div >
<div class ="spinner-border text-dark" role ="status" >
<span class ="visually-hidden" > Loading...</span >
</div >
</body >
</html >
Bootstrap Growing Spinner
If you don’t fancy a border spinner, switch to the grow spinner. While it doesn’t technically spin, it does repeatedly grow.
<!doctype html>
<html lang ="en" >
<head >
<meta charset ="utf-8" >
<meta name ="viewport" content ="width=device-width, initial-scale=1" >
<link href ="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel ="stylesheet" >
<link href ="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel ="stylesheet" >
<title > Bootstrap Example</title >
<script src ="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" > </script >
</head >
<body class ="p-3 m-0 border-0 bd-example" >
<div class ="spinner-grow text-primary" role ="status" >
<span class ="visually-hidden" > Loading...</span >
</div >
<div class ="spinner-grow text-secondary" role ="status" >
<span class ="visually-hidden" > Loading...</span >
</div >
<div class ="spinner-grow text-success" role ="status" >
<span class ="visually-hidden" > Loading...</span >
</div >
<div class ="spinner-grow text-danger" role ="status" >
<span class ="visually-hidden" > Loading...</span >
</div >
<div class ="spinner-grow text-warning" role ="status" >
<span class ="visually-hidden" > Loading...</span >
</div >
<div class ="spinner-grow text-info" role ="status" >
<span class ="visually-hidden" > Loading...</span >
</div >
<div class ="spinner-grow text-light" role ="status" >
<span class ="visually-hidden" > Loading...</span >
</div >
<div class ="spinner-grow text-dark" role ="status" >
<span class ="visually-hidden" > Loading...</span >
</div >
</body >
</html >
Use margin property like .m-5 for easy spacing.
<!doctype html>
<html lang ="en" >
<head >
<meta charset ="utf-8" >
<meta name ="viewport" content ="width=device-width, initial-scale=1" >
<link href ="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel ="stylesheet" >
<link href ="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel ="stylesheet" >
<title > Bootstrap Example</title >
<script src ="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" > </script >
</head >
<body class ="p-3 m-0 border-0 bd-example" >
<div class ="spinner-border m-5" role ="status" >
<span class ="visually-hidden" > Loading...</span >
</div >
</body >
</html >
Flexbox is a CSS layout module that provides a flexible way to align and distribute content within a container. It allows you to create complex layouts with ease, and is often used in combination with Bootstrap to create responsive and flexible designs.
<!doctype html>
<html lang ="en" >
<head >
<meta charset ="utf-8" >
<meta name ="viewport" content ="width=device-width, initial-scale=1" >
<link href ="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel ="stylesheet" >
<link href ="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel ="stylesheet" >
<title > Bootstrap Example</title >
<script src ="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" > </script >
</head >
<body class ="p-3 m-0 border-0 bd-example" >
<div class ="d-flex justify-content-center" >
<div class ="spinner-border" role ="status" >
<span class ="visually-hidden" > Loading...</span >
</div >
</div >
</body >
</html >
<!doctype html>
<html lang ="en" >
<head >
<meta charset ="utf-8" >
<meta name ="viewport" content ="width=device-width, initial-scale=1" >
<link href ="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel ="stylesheet" >
<link href ="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel ="stylesheet" >
<title > Bootstrap Example</title >
<script src ="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" > </script >
</head >
<body class ="p-3 m-0 border-0 bd-example" >
<div class ="clearfix" >
<div class ="spinner-border float-end" role ="status" >
<span class ="visually-hidden" > Loading...</span >
</div >
</div >
</body >
</html >
Bootstrap Spinner Text align
Bootstrap Spinner is a component that displays a spinning animation to indicate that a task is in progress. It can be used in combination with text or other elements to provide visual feedback to the user.
<!doctype html>
<html lang ="en" >
<head >
<meta charset ="utf-8" >
<meta name ="viewport" content ="width=device-width, initial-scale=1" >
<link href ="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel ="stylesheet" >
<link href ="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel ="stylesheet" >
<title > Bootstrap Example</title >
<script src ="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" > </script >
</head >
<body class ="p-3 m-0 border-0 bd-example" >
<div class ="text-center" >
<div class ="spinner-border" role ="status" >
<span class ="visually-hidden" > Loading...</span >
</div >
</div >
</body >
</html >
Add .spinner-border-sm and .spinner-grow-sm to make a smaller spinner that can quickly be used within other components.
<!doctype html>
<html lang ="en" >
<head >
<meta charset ="utf-8" >
<meta name ="viewport" content ="width=device-width, initial-scale=1" >
<link href ="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel ="stylesheet" >
<link href ="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel ="stylesheet" >
<title > Bootstrap Example</title >
<script src ="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" > </script >
</head >
<body class ="p-3 m-0 border-0 bd-example" >
<div class ="spinner-border spinner-border-sm" role ="status" >
<span class ="visually-hidden" > Loading...</span >
</div >
<div class ="spinner-grow spinner-grow-sm" role ="status" >
<span class ="visually-hidden" > Loading...</span >
</div >
</body >
</html >
Bootstrap Spinner Size Example (Use custom CSS or inline styles)
<!doctype html>
<html lang ="en" >
<head >
<meta charset ="utf-8" >
<meta name ="viewport" content ="width=device-width, initial-scale=1" >
<link href ="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel ="stylesheet" >
<link href ="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel ="stylesheet" >
<title > Bootstrap Example</title >
<script src ="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" > </script >
</head >
<body class ="p-3 m-0 border-0 bd-example" >
<div class ="spinner-border" style ="width: 3rem; height: 3rem;" role ="status" >
<span class ="visually-hidden" > Loading...</span >
</div >
<div class ="spinner-grow" style ="width: 3rem; height: 3rem;" role ="status" >
<span class ="visually-hidden" > Loading...</span >
</div >
</body >
</html >
Bootstrap Spinner Buttons
Bootstrap Spinner Button is a combination of two Bootstrap components: the Spinner and the Button. It is used to display a spinning animation inside a button to indicate that a task is in progress, while also disabling the button to prevent further user interaction during that time.
<!doctype html>
<html lang ="en" >
<head >
<meta charset ="utf-8" >
<meta name ="viewport" content ="width=device-width, initial-scale=1" >
<link href ="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel ="stylesheet" >
<link href ="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel ="stylesheet" >
<title > Bootstrap Example</title >
<script src ="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" > </script >
</head >
<body class ="p-3 m-0 border-0 bd-example" >
<button class ="btn btn-primary" type ="button" disabled ="" >
<span class ="spinner-border spinner-border-sm" role ="status" aria-hidden ="true" > </span >
<span class ="visually-hidden" > 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 >
</body >
</html >
Bootstrap Spinner Buttons Example
<!doctype html>
<html lang ="en" >
<head >
<meta charset ="utf-8" >
<meta name ="viewport" content ="width=device-width, initial-scale=1" >
<link href ="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel ="stylesheet" >
<link href ="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel ="stylesheet" >
<title > Bootstrap Example</title >
<script src ="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" > </script >
</head >
<body class ="p-3 m-0 border-0 bd-example" >
<button class ="btn btn-primary" type ="button" disabled ="" >
<span class ="spinner-grow spinner-grow-sm" role ="status" aria-hidden ="true" > </span >
<span class ="visually-hidden" > 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 >
</body >
</html >
