Bootstrap Spinners
Bootstrap Spinners
Spinner也称为加载指示器。它用于显示/指示我们项目的加载状态。 Bootstrap使用 .spinner 类创建Spinner。
我们使用以下语法在Bootstrap -
<div class = "spinner-border"> </div>
Spinners的类型
我们使用Bootstrap创建以下类型的Spinners-
1、Spinners边框
边框Spinners用于轻量指示器。
我们使用以下语法在Bootstrap中创建边框Spinners-
语法:
<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>
2、Spinners颜色
我们使用以下语法在Bootstrap中创建彩色Spinners-
<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>
3、Spinners加载
我们使用 .spinner-grow 类在Bootstrap中创建加载中的Spinners。
语法:
<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>
4、Spinners加载颜色
我们使用以下语法在Bootstrap中创建彩色生长Spinners。
语法:
<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>
更改Spinners对齐方式
Bootstrap允许我们使用边距和放置实用程序来更改Spinners对齐方式。
1、使用边距
边距用于根据我们项目的要求提供适当的间距。
语法:
语法:
<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>
2、更改文本对齐方式
.text-center 类用于更改文本对齐方式。
<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>
3、使用Flexbox
我们可以使用以下语法通过Flexbox更改Spinners对齐方式-
语法:
<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>
4、使用Float
我们使用以下语法使用Float更改Spinners对齐-
语法:
<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>
更改Spinners尺寸
我们还可以根据需要更改Spinners尺寸。以下div类用于更改Spinners的大小-
1、小型Spinners-我们使用 .spinner-border-sm 和 .spinner-grow-sm 制作小型Spinners。
语法:
<!--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>
2、大型Spinners-我们使用 .spinner-border-lg 和 .spinner-grow-lg 类创建大型Spinners。
语法:
<!--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 Spinners按钮
内部按钮Spinners指示当前处于处理阶段的操作。
语法
<!--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>
