介绍Spinners组件
Bootstrap是一个流行的前端框架，它提供了多种组件来帮助开发人员快速构建漂亮和高性能的web和移动界面。 Spinners组件是Bootstrap中一个非常实用的组件，它用于展示浏览器正在加载数据或执行任务时的加载效果。 Spinners组件中提供了多个不同样式和大小的加载图标，供开发人员自由选择。
Spinners组件由一些CSS类、HTML、JavaScript代码和少量图标资源组成。开发人员可以使用这些资源来创建自己的特定样式和大小的加载效果。在本文中，我们将学习如何使用Spinners组件来在应用程序中实现加载效果。
Spinners组件的基本用法
Spinners组件提供了多种基本样式和大小的加载图标，每个图标都有一个独特的CSS类名。我们可以使用CSS类名将特定的加载图标应用到我们的HTML元素上。以下是一个基本的HTML和CSS代码，它演示了如何使用Spinners组件来实现加载效果：
<!-- HTML代码 -->
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
<!-- CSS代码 -->
.spinner-border {
display: inline-block;
width: 2rem;
height: 2rem;
vertical-align: text-bottom;
border: .25em solid currentColor;
border-right-color: transparent;
border-radius: 50%;
-webkit-animation: spinner-border .75s linear infinite;
animation: spinner-border .75s linear infinite;
}
@-webkit-keyframes spinner-border {
to { -webkit-transform: rotate(360deg); }
}
@keyframes spinner-border {
to { transform: rotate(360deg); }
}
上述代码定义了一个带有Loading...文本的 <div> 元素，它有一个名为 的Bootstrap Spinners类。 此类为元素定义了特定的CSS样式和动画效果。当加载过程开始时，该元素将表现为一个带有动画效果的旋转圆圈，直到加载完成。元素的高度和宽度由widthheight属性定义，动画效果由animation属性定义。
详解Spinners组件的代码
让我们详细了解一下上述代码的含义。如上所述，该代码分为两个部分，HTML代码和CSS代码。
1. HTML代码
以下是HTML代码的详细解释：
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
- 给 <div> 元素加上名为 spinner-border 的类，以便应用Spinners效果；
- set role 属性的值为“status”，以遵循wai-aria规范，提供有意义的信息来帮助屏幕阅读器用户理解元素；
- 使用 Loading... 元素带上 sr-only 类，以便为屏幕阅读器用户提供附加信息。
2. CSS代码
以下是CSS代码的详细解释：
.spinner-border {
display: inline-block;
width: 2rem;
height: 2rem;
vertical-align: text-bottom;
border: .25em solid currentColor;
border-right-color: transparent;
border-radius: 50%;
-webkit-animation: spinner-border .75s linear infinite;
animation: spinner-border .75s linear infinite;
}
@-webkit-keyframes spinner-border {
to { -webkit-transform: rotate(360deg); }
}
@keyframes spinner-border {
to { transform: rotate(360deg); }
}
代码的核心是对 .spinner-border 类的定义，这是应用Spinners效果的主要类。以下是各行代码的详细解释：
- display: inline-block; 让元素呈现为一个常规的行内元素；
- width: 2rem; 和 height: 2rem; 设置元素的高度和宽度；
- vertical-align: text-bottom; 将元素垂直对齐到其行文本的基线；
- border: .25em solid currentColor; 设置元素的边框样式，.25em的大小和currentColor让颜色适应元素的字体颜色。
- border-right-color: transparent; 把边框的右侧颜色设置为透明，从而在展示旋转时，只有左侧的浅色边框变为深色形成的边框变化，看起来圆圈在转动。
- border-radius: 50%; 让元素的边框变成半径为50%的圆形，从而形成圆形目录；
- -webkit-animation: spinner-border .75s linear infinite; 定义元素的旋转动画，.75s代表了动画持续时间，linear代表线性动画，infinite代表动画无限循环。
在Spinners组件代码中，还通过@-webkit-keyframes 和@keyframes 定义了旋转动画的关键帧。当被应用到样式中时，动画将在0%和100%之间循环，通过-webkit-transform: rotate(360deg); 属性，元素将整体旋转360度。
Spinners组件的其他选项
Spinners组件还有一些其他的样式和选项，使开发人员可以定制加载效果来适应特定的应用程序和需求。以下是Spinners所有其他选项和样式：
样式：
.spinner-border：圆圈旋转的加载符号
.spinner-grow：紫色为主线条旋转的加载符号
尺寸：
.spinner-border-sm：为小型圆圈旋转加载添加此类
.spinner-grow-sm：添加此类以使小型紫色主线条旋转加载符号
现在让我们看一下在Spinners组件中如何应用这些选项：
1. 使用spinner-grow类名
以下是使用 CSS类实现的加载效果：
<div class="spinner-grow" role="status">
<span class="sr-only">Loading...</span>
</div>
上述代码使用 CSS类名称，以实现一种不同的加载效果。该类与spinner-border类有所不同，它呈现为带有一个紫色线条的加载符号，而不是圆圈。除此之外，该类与前面相同，其使用方法与spinner-border类相同。
2. 自定义尺寸
调整Spinners的大小也非常简单。 Bootstrap提供了两个其他Spinner类（.spinner-border-sm 和 .spinner-grow-sm），这些类用于调整加载图标的大小。我们可以使用相同的类方式来改变大小：
<div class="spinner-grow spinner-grow-sm" role="status">
<span class="sr-only">Loading...</span>
</div>
上述代码使用spinner-grow和spinner-grow-sm类名来创建一个不同的加载效果，使加载图标变小。 由于我们使用了spinner-grow-sm类，因此紫线变短了，图标看起来更紧凑。用法类似Spinner Border。
总结
Spinners组件是Bootstrap中一个非常实用的组件，可以帮助我们轻松地创建可定制的加载效果。 该组件提供了多种样式和选项，如不同的大小和样式，可以根据特定应用程序的需求进行定制。 在本文中，我们分享了如何使用Spinners组件来创建基本加载效果、自定义加载符号的大小和样式。