使用 CSS 加载 Spinner

微调器是指示网页组件加载状态的小元素。大多数情况下，加载器 GIF 图标在加载动画中用作旋转器。如果您想要一个简单的旋转动画解决方案，可以使用 CSS 来创建剪辑图标，而无需使用 JavaScript/jQuery。

纯CSS微调器有助于减少页面加载时间并向网页添加用户友好的加载动画。在此示例代码片段中，我们将使用 HTML 和 CSS 创建旋转器。

HTML 代码：

<div class="spinner" role="status">
<span class="sr-only">Loading...</span>
</div>

CSS代码：

@keyframes spinner-border {
to { transform: rotate(360deg); }
}
.spinner {
display: inline-block;
width: 2rem;
height: 2rem;
vertical-align: -0.125em;
color: #007bff;
border: 0.25em solid currentcolor;
border-right-color: transparent;
border-radius: 50%;
-webkit-animation: .75s linear infinite spinner-border;
animation: .75s linear infinite spinner-border;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
white-space: nowrap;
border: 0;
}

将微调器添加到按钮

以下代码片段用于使用 CSS 在 HTML 按钮中添加加载微调器。

HTML 代码：

<button class="btn btn-primary" type="button" disabled>
<span class="spinner" role="status" aria-hidden="true"></span>
Loading...
</button>

CSS代码：

@keyframes spinner-border {
to { transform: rotate(360deg); }
}
.spinner {
display: inline-block;
width: 2rem;
height: 2rem;
vertical-align: -0.125em;
color: #007bff;
border: 0.25em solid currentcolor;
border-right-color: transparent;
border-radius: 50%;
-webkit-animation: .75s linear infinite spinner-border;
animation: .75s linear infinite spinner-border;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
white-space: nowrap;
border: 0;
}

.btn {
display: inline-block;
font-weight: 400;
color: #212529;
text-align: center;
vertical-align: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-color: transparent;
border: 1px solid transparent;
padding: 0.375rem 0.75rem;
font-size: 1rem;
line-height: 1.5;
border-radius: 0.25rem;
}
.btn-primary {
color: #fff;
background-color: #007bff;
border-color: #007bff;
}
.btn:disabled {
opacity: .65;
}
.btn .spinner {
color: #fff;
width: 1rem;
height: 1rem;
vertical-align: middle;
}