<div class = "spinner-border"> </div>
<div class = "spinner-border" role = "status">
<span class = "sr-only">Loading...</span>
</div>
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<title>Bootstrap Border Spinner Example</title>
<!--Bootstrap CDN-->
<link rel = "stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<style>
.container {
text-align: center;
}
</style>
</head>
<body>
<div class = "container">
<div class = "jumbotron">
<h1>Border Spinner Example</h1>
<div class = "spinner-border" role = "status">
<!--status notify to Screen reader that this element is in the process-->
<span class = "sr-only">Loading...</span>
<!--sr-only class hidden in normal devices, but it can be detected by screen readers-->
</div>
</div>
</div>
</body>
</html>
<div class = "spinner-border text-light" role = "status">
<span class = "sr-only">Loading...</span>
</div>
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<title>Bootstrap Border Spinner Example</title>
<!--Bootstrap CDN-->
<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<style>
.container {
text-align: center;
}
</style>
</head>
<body>
<div class = "container">
<div class = "jumbotron">
<h1>Colored Spinner Example</h1>
<!--Colored Spinners-->
<div class="spinner-border text-muted" 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-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-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-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 class = "spinner-border text-dark" role = "status">
<span class = "sr-only">Loading...</span>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
<div class = "spinner-grow" role = "status">
<span class = "sr-only">Loading</span>
</div>
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Growing Spinner Example</title>
<!--Bootstrap CDN-->
<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
</head>
<body>
<div class = "container">
<div class = "jumbotron">
<h1>Growing Spinner Example</h1>
<!--Growing Spinner-->
<div class = "spinner-grow" role = "status">
<span class = "sr-only">Loading...</span>
</div>
</div>
</div>
</body>
</html>
<div class = "spinner-grow text-success" role = "status">
<span class = "sr-only">Loading...</span>
</div>
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Colored Growing Spinner Example</title>
<!--Bootstrap CDN-->
<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
</head>
<body>
<div class = "container">
<div class = "jumbotron">
<h1>Colored Growing Spinner Example</h1>
<!--Colored Growing Spinner-->
<div class = "spinner-grow text-success" 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>
<div class = "spinner-grow text-warning" 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-danger" role = "status">
<span class = "sr-only">Loading...</span>
</div>
<div class = "spinner-grow text-primary" role = "status">
<span class = "sr-only">Loading...</span>
</div>
</div>
</div>
</body>
</html>
<div class = "spinner-border m-5" role = "status">
<span class = "sr-only">Loading...</span>
</div>
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Spinner Margin Example</title>
<!--Bootstrap CDN-->
<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
</head>
<body>
<div class = "container">
<h1> Spinner Margin Example</h1>
<!--Spinner Margin-->
<div class="spinner-border m-5" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
</div>
</body>
</html>
<div class = "text-center">
<div class = "spinner-border" role = "status">
<span class = "sr-only">Loading...</span>
</div>
</div>
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Text alignment Example</title>
<!--Bootstrap CDN-->
<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<style>
.jumbotron {
text-align: center;
}
</style>
</head>
<body>
<div class = "container">
<div class = "jumbotron">
<h1> Spinner Text alignemt Example</h1>
<!--Change the text alignment-->
<div class = "text-center">
<div class = "spinner-border text-success" 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-dark" role = "status">
<span class = "sr-only">Loading...</span>
</div>
</div>
</div>
</div>
</body>
</html>
<div class = "d-flex align-items-center text-success">
<strong>Loading...</strong>
<div class = "spinner-border ml-auto" role = "status" aria-hidden = "true">
</div>
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Flexbox Spinner Example</title>
<!--Bootstrap CDN-->
<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<style>
.jumbotron {
text-align: center;
margin: 20px;
}
</style>
</head>
<body>
<div class = "container text-primary">
<div class = "jumbotron text-align-center">
<h1> Spinner Flexbox alignment Example</h1>
<!--Change alignment using Flexbox-->
<div class = "d-flex align-items-center text-success">
<strong>Loading...</strong>
<div class = "spinner-border ml-auto" role = "status" aria-hidden = "true">
</div>
</div>
</div>
</div>
</body>
</html>
<div class = "clearfix">
<div class = "spinner-border float-right" role = "status">
<span class = "sr-only">Loading...</span>
</div>
</div>
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap float Spinner Example</title>
<!--Bootstrap CDN-->
<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<style>
.jumbotron {
text-align: center;
margin: 20px;
}
</style>
</head>
<body>
<div class = "container text-success">
<div class = "jumbotron text-align-center">
<h1> Spinner float alignment Example</h1>
<!--Change alignment using float-->
<div class = "clearfix">
<strong>Loading Page...</strong>
<div class = "spinner-border float-right text-primary" role = "status">
<span class = "sr-only">Loading...</span>
</div>
</div>
</div>
</body>
</html>
<!--for small border spinner-->
<div class = "spinner-border spinner-border-sm" role = "status">
<span class = "sr-only">Loading...</span>
</div>
<!--for small grow border spinner-->
<div class = "spinner-grow spinner-grow-sm" role = "status">
<span class = "sr-only">Loading...</span>
</div>
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<title>Bootstrap Small Spinner Example</title>
<!--Bootstrap CDN-->
<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<style>
.jumbotron {
text-align: center;
margin: 20px;
}
</style>
</head>
<body>
<div class = "container text-success">
<div class = "jumbotron text-align-center">
<h1> Small Spinner Example</h1>
<!--for small border spinner-->
<div class = "spinner-border spinner-border-sm text-primary" role = "status">
<span class = "sr-only">Loading...</span>
</div>
<!--for small grow border spinner-->
<div class = "spinner-grow spinner-grow-sm text-warning" role = "status">
<span class = "sr-only">Loading...</span>
</div>
</div>
</body>
</html>
<!--for Large border spinner-->
<div class = "spinner-border spinner-border-lg text-primary" role = "status">
<span class = "sr-only">Loading...</span>
</div>
<!--for Large grow border spinner-->
<div class = "spinner-grow spinner-grow-lg text-warning" role = "status">
<span class = "sr-only">Loading...</span>
</div>
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<title>Bootstrap Large Spinner Example</title>
<!--Bootstrap CDN-->
<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<style>
.jumbotron {
text-align: center;
margin: 20px;
}
</style>
</head>
<body>
<div class = "container text-success">
<div class = "jumbotron text-align-center">
<h1> Large Spinner Example</h1>
<!--for Large border spinner-->
<div class = "spinner-border spinner-border-lg text-primary" role = "status">
<span class = "sr-only">Loading...</span>
</div>
<!--for Large grow border spinner-->
<div class = "spinner-grow spinner-grow-lg text-warning" role = "status">
<span class = "sr-only">Loading...</span>
</div>
</div>
</body>
</html>
<!--Bootstrap grow Spinner 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>
<!--Bootstrap border Spinner Button-->
<button class = "btn btn-secondary" type="button" disabled>
<span class = "spinner-border spinner-border-grow" role = "status" aria-hidden = "true"></span>
Loading...
</button>
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<title>Bootstrap Spinner Button Example</title>
<!--Bootstrap CDN-->
<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<style>
.jumbotron {
text-align: center;
margin: 20px;
}
</style>
</head>
<body>
<div class = "container text-success">
<div class = "jumbotron text-align-center">
<h1> Bootstrap Spinner Button Example</h1>
<!--Bootstrap grow Spinner 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>
<!--Bootstrap border Spinner Button-->
<button class = "btn btn-secondary" type="button" disabled>
<span class = "spinner-border spinner-border-grow" role = "status" aria-hidden = "true"></span>
Loading...
</button>
</div>
</body>
</html>