极客教程Bootstrap 4 Spinners
Bootstrap提供了各种类来创建不同风格的 “旋转器 “以显示项目的加载状态。这些类是内置在HTML和CSS中的，所以不需要写任何JavaScript来创建它们。我们还可以用Bootstrap提供的类来修改旋转器的外观、大小和位置。
Spinners的类型：
- Border spinner。我们可以使用
.spinner-border类来创建轻量级的边框旋转器，如下所示。
语法:
<div class="spinner-border" role="status">
<span class="sr-only">Loading</span>
</div>
- 示例:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Spinners</title>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
</script>
</head>
<body>
<center>
<h1 style="color:green;text-align:center;">
GeeksforGeeks
</h1>
<!-- spinner-border -->
<div class="spinner-border" role="status">
<span class="sr-only">Loading</span>
</div>
</center>
</body>
</html>
- 输出:
- 注意：我们在
<div>元素中使用了.spinner-border类. 我们在<div>内使用了role="status "属性-值对，以达到无障碍的目的，并使用了class="sr-only"的<span>标签，这是一个Bootstrap类，使容器和它的内容只在读屏者身上可见。 -
Colored Spinners。我们可以使用Bootstrap的文本颜色工具类和
.spinner-border类来改变边框旋转器的颜色，如下所示。
语法:
<div class="spinner-border text-primary" role="status">
<span class="sr-only">Loading</span>
</div>
- 示例:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Spinners</title>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
</script>
</head>
<body>
<center>
<h1 style="color:green;text-align:center;">
GeeksforGeeks
</h1>
<!-- spinner-border, #1 -->
<div class="spinner-border text-primary"
role="status">
<span class="sr-only">Loading</span>
</div>
<!-- spinner-border, #2 -->
<div class="spinner-border text-secondary"
role="status">
<span class="sr-only">Loading</span>
</div>
<!-- spinner-border, #3 -->
<div class="spinner-border text-success"
role="status">
<span class="sr-only">Loading</span>
</div>
<!-- spinner-border, #4 -->
<div class="spinner-border text-danger"
role="status">
<span class="sr-only">Loading</span>
</div>
<!-- spinner-border, #5 -->
<div class="spinner-border text-warning"
role="status">
<span class="sr-only">Loading</span>
</div>
<!-- spinner-border, #6 -->
<div class="spinner-border text-info"
role="status">
<span class="sr-only">Loading</span>
</div>
<!-- spinner-border, #7 -->
<div class="spinner-border text-light"
role="status">
<span class="sr-only">Loading</span>
</div>
<!-- spinner-border, #8 -->
<div class="spinner-border text-dark"
role="status">
<span class="sr-only">Loading</span>
</div>
</center>
</body>
</html>
- 输出:
- 注意：我们使用了文本颜色工具，而不是边框颜色工具，因为每个边框旋钮至少为一侧指定了一个透明边框，而
border-{color}工具则覆盖了这一点。 -
Growing spinner。我们可以通过使用Bootstrap的
.spinner-grow类来创建不断增长的旋转器。它的显示方式是反复增长。
语法:
<div class="spinner-grow" role="status">
<span class="sr-only">Loading</span>
</div>
- 示例:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Spinners</title>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
</script>
</head>
<body>
<center>
<h1 style="color:green;text-align:center;">
GeeksforGeeks
</h1>
<!-- spinner-grow -->
<div class="spinner-grow" role="status">
<span class="sr-only">Loading</span>
</div>
</center>
</body>
</html>
- 输出:
- 注意：我们在
<div>中使用了类.spin -grow。我们在<div>中使用了role= " status "属性-值对用于辅助访问，并在class= " sr-only "中使用了<span>标记，这是一个Bootstrap类，它使容器及其内容仅在屏幕阅读器上可见。 -
彩色的Colored growing spinner。我们可以通过使用Bootstrap的文本颜色工具类和
.spinner-grow类来改变成长型喷丝板的颜色，如下图所示。
语法:
<div class="spinner-grow text-primary" role="status">
<span class="sr-only">Loading</span>
</div>
- 示例:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Spinners</title>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
</script>
</head>
<body>
<center>
<h1 style="color:green;text-align:center;">
GeeksforGeeks
</h1>
<!-- spinner-grow, #1 -->
<div class="spinner-grow text-primary"
role="status">
<span class="sr-only">Loading</span>
</div>
<!-- spinner-grow, #2 -->
<div class="spinner-grow text-secondary"
role="status">
<span class="sr-only">Loading</span>
</div>
<!-- spinner-grow, #3 -->
<div class="spinner-grow text-success"
role="status">
<span class="sr-only">Loading</span>
</div>
<!-- spinner-grow, #4 -->
<div class="spinner-grow text-danger"
role="status">
<span class="sr-only">Loading</span>
</div>
<!-- spinner-grow, #5 -->
<div class="spinner-grow text-warning"
role="status">
<span class="sr-only">Loading</span>
</div>
<!-- spinner-grow, #6 -->
<div class="spinner-grow text-info"
role="status">
<span class="sr-only">Loading</span>
</div>
<!-- spinner-grow, #7 -->
<div class="spinner-grow text-light"
role="status">
<span class="sr-only">Loading</span>
</div>
<!-- spinner-grow, #8 -->
<div class="spinner-grow text-dark"
role="status">
<span class="sr-only">Loading</span>
</div>
</center>
</body>
</html>
- 输出:
- 注意：旋转器是用currentColor建立的，可以用文本颜色工具轻松改变其外观。
-
带边框Spinners的按钮。我们可以通过在
<span>标签中使用.spinner-border类，将边框旋转器放置在有文本或无文本的按钮中。
语法:
<button type="button" class="btn btn-primary" disabled>
<span class="spinner-border spinner-border-sm"
role="status" aria-hidden="true">
</span>
Text
</button>
- 示例:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Spinners</title>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
</script>
</head>
<body>
<center>
<h1 style="color:green;text-align:center;">
GeeksforGeeks
</h1>
<div class="container">
<button type="button"
class="btn btn-secondary" disabled>
<span class="spinner-border spinner-border-sm"
role="status" aria-hidden="true">
</span>
<span class="sr-only">Loading</span>
</button>
<button type="button"
class="btn btn-primary" disabled>
<span class="spinner-border spinner-border-sm"
role="status" aria-hidden="true">
</span>
Processing...
</button>
</div>
</center>
</body>
</html>
- 输出:
- 注意：我们在
<button>标签中放置了“disabled”属性来禁用它，并在<span>标签中使用了“role”和“aria-hidden”属性来实现可访问性。 -
带增长型spinner的按钮。通过在
<span>标记中使用.spinner-grow类，可以在带有文本或不带有文本的按钮中放置不断增长的旋转器。
语法:
<button type="button" class="btn btn-primary" disabled>
<span class="spinner-grow spinner-grow-sm"
role="status" aria-hidden="true">
</span>
text
</button>
- 示例:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Spinners</title>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
</script>
</head>
<body>
<center>
<h1 style="color:green;text-align:center;">
GeeksforGeeks
</h1>
<div class="container">
<button type="button"
class="btn btn-secondary" disabled>
<span class="spinner-grow spinner-grow-sm"
role="status" aria-hidden="true">
</span>
<span class="sr-only">Loading</span>
</button>
<button type="button"
class="btn btn-primary" disable>
<span class="spinner-grow spinner-grow-sm"
role="status" aria-hidden="true">
</span>
Processing...
</button>
</div>
</center>
</body>
</html>
- 输出:
- 注意：我们在
<button>标签中放置了“disabled”属性来禁用它，并在<span>标签中使用了“role”和“aria-hidden”属性来实现可访问性。
改变大小：
- 使用类。我们可以使用
.spinner-border-sm和.spinner-grow-sm类以及.spinner-border和.spinner-grow类来改变大小。
以下是尺寸等级的列表。 - sm
- md
- lg
- 使用CSS。我们也可以使用CSS样式来改变旋转器的大小，如下所示。
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Spinners</title>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
</script>
</head>
<body>
<center>
<div class="container">
<h1 style="color:green;text-align:center;">
GeeksforGeeks
</h1>
<div class="spinner-border text-primary"
role="status" style="height:5rem; width:5rem;">
<span class="sr-only">Loading</span>
</div>
<div class="spinner-grow text-primary"
role="status" style="height:5rem; width:5rem;">
<span class="sr-only">Loading</span>
</div>
</div>
</center>
</body>
</html>
- 输出:
改变对齐方式：
- 使用文本对齐实用程序。我们可以通过将旋转器放置在
<div>标签，它使用文本对齐工具类来控制子元素的对齐，如下所示。
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Spinners</title>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
</script>
</head>
<body>
<div class="container">
<h1 style="color:green;text-align:center;">
GeeksforGeeks
</h1>
<!-- Changing alignment using text utilities class -->
<div class="text-center">
<div class="spinner-border text-primary"
role="status">
<span class="sr-only">Loading</span>
</div>
</div>
</div>
</body>
</html>
- 输出:
- 使用float utilities。我们可以通过将其放置在浮动实用程序中来改变旋转器的对齐方式。
<div>标签，该标签使用float utilities类来控制子元素的对齐方式，或者直接使用float utilities类在<div>标签，通过该标签创建了旋转器，如下所示。
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Spinners</title>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
</script>
</head>
<body>
<div class="container">
<h1 style="color:green;text-align:center;">
GeeksforGeeks
</h1>
<!-- Changing alignment using text utilities class -->
<div class="clearfix float-right">
<div class="spinner-border text-primary"
role="status">
<span class="sr-only">Loading</span>
</div>
</div>
</div>
</body>
</html>
- 输出:
- 使用flexbox实用程序。我们可以通过将旋转器放置在以下位置来改变其对齐方式
<div>元素，它使用flexbox工具类来控制子元素的排列，如下所示。
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Spinners</title>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
</script>
</head>
<body>
<div class="container">
<h1 style="color:green;text-align:center;">
GeeksforGeeks
</h1>
<!-- Changing alignment using text utilities class -->
<div class="d-flex justify-content-center">
<div class="spinner-border text-primary"
role="status">
<span class="sr-only">Loading</span>
</div>
</div>
</div>
</body>
</html>
- 输出:
支持的浏览器:
- Google Chrome
- Internet Explorer
- Firefox
- Opera
- Safari