Bootstrap的旋转器组件

旋转效果可以用来指示状态，比如页面的加载状态。

可以用类spinner-border实现普通旋转的旋转器效果。
用类spinner-grow实现渐渐变大的旋转器效果。

01-最基本的示例代码

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>旋转器颜色</title><meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no"><link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css"><script src="jquery-3.5.1.slim.js"></script><script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h3>第一种旋转器</h3>
<div class="spinner-border"></div>
<h3>第二种旋转器</h3>
<div class="spinner-grow"></div>
</body>
</html>

运行效果如下：
在这里插入图片描述

在这里插入图片描述

02-设置旋转器的颜色

示例代码如下：

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>旋转器颜色</title><meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no"><link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css"><script src="jquery-3.5.1.slim.js"></script><script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h3>旋转器颜色</h3>
<div class="spinner-border text-primary"></div>
<div class="spinner-border text-secondary"></div>
<div class="spinner-border text-success"></div>
<div class="spinner-border text-danger"></div>
<div class="spinner-border text-warning"></div>
<div class="spinner-border text-info"></div>
<div class="spinner-border text-light"></div>
<div class="spinner-border text-dark"></div>
<br/>
<br/>
<div class="spinner-grow text-primary"></div>
<div class="spinner-grow text-secondary"></div>
<div class="spinner-grow text-success"></div>
<div class="spinner-grow text-danger"></div>
<div class="spinner-grow text-warning"></div>
<div class="spinner-grow text-info"></div>
<div class="spinner-grow text-light"></div>
<div class="spinner-grow text-dark"></div>
</body>
</html>

运行效果如下：
在这里插入图片描述

03-设置旋转器的大小

示例代码如下：

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>设置旋转器的大小</title><meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no"><link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css"><script src="jquery-3.5.1.slim.js"></script><script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h3 align="center">小的旋转器</h3>
<div class="spinner-border spinner-border-sm"></div>
<div class="spinner-grow spinner-grow-sm  ml-5"></div><hr/>
<h2 align="center">大的旋转器</h2>
<div class="spinner-border" style="width: 3rem; height: 3rem;"></div>
<div class="spinner-grow ml-5" style="width: 3rem; height: 3rem;"></div>
</body>
</html>

运行效果如下：
在这里插入图片描述

04-设置旋转器的对齐方式

略…

05-把旋转器放在按钮中

示例代码如下：

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>按钮旋转器</title><meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no"><link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css"><script src="jquery-3.5.1.slim.js"></script><script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h3 align="center">按钮旋转器</h3>
<button class="btn btn-danger" type="button" disabled><span class="spinner-border spinner-border-sm"></span>
</button>
<button class="btn btn-danger" type="button" disabled><span class="spinner-border spinner-border-sm"></span>Loading...
</button><hr/>
<button class="btn btn-success" type="button" disabled><span class="spinner-grow spinner-grow-sm"></span>
</button>
<button class="btn btn-success" type="button" disabled><span class="spinner-grow spinner-grow-sm"></span>Loading...
</button>
</body>
</html>