扫码一下
查看教程更方便
教程 > bootstrap 4 教程 >
阅读：155
bootstrap4 如何创建加载图标——迹忆客-ag捕鱼王app官网
bootstrap 引入了新的加载组件，我们可以使用它来显示应用程序中的加载状态。 spinners 通常加载图标并且它们仅使用 html 和 css 创建。 但是，我们需要一些自定义 javascript 来在网页上显示或隐藏它们。
此外，我们可以使用预定义的实用程序类轻松自定义加载图标的外观样式、对齐方式和大小。 现在，让我们看看如何创建它们。
创建边框加载图标
我们可以创建边框加载器或轻量级加载图标，如下所示：
.visually-hidden 是一个特殊的类，使用该类，除屏幕阅读器之外的所有设备隐藏元素。
创建不同颜色的边框加载图标
我们可以使用文本颜色实用程序类来自定义加载器的颜色。
创建淡入淡出的加载器
我们还可以创建重复淡入淡出的加载器，如下所示：
同样，我们还可以创建不同颜色的淡入淡出的加载器
我们通过动图来看一下效果，也可以点击尝试一下查看效果
加载器的大小
我们可以使用 .spinner-border-sm 和 .spinner-grow-sm 类来制作一个较小的加载器，可以在其他组件（如按钮）中快速使用。也可以使用css的宽度和高度调整大小
使用加载器按钮
我们还可以在按钮内使用加载器来指示当前正在处理或发生的操作。
我们看下面的示例。
