Bootstrap 5 提供了多种加载器组件，用于在页面上显示加载状态或进度条。这些加载器组件可以帮助用户理解当前页面的状态，并提升用户体验。
基本加载器
基本加载器是一个简单的旋转圆圈，可以用来表示加载过程正在进行中。使用 spinner-border 类创建一个边框样式的基本加载器，而 spinner-grow 类则创建一个带有渐变效果的加载器。
<div class="spinner-border" role="status"> <span class="visually-hidden">加载中...</span> </div> <div class="spinner-grow" role="status"> <span class="visually-hidden">加载中...</span> </div>
边框加载器
边框加载器使用 spinner-border 类，它创建了一个带边框的圆形加载器。
<div class="spinner-border text-primary" role="status"> <span class="visually-hidden">加载中...</span> </div>
渐变加载器
渐变加载器使用 spinner-grow 类，它创建了一个带有渐变效果的圆形加载器。
<div class="spinner-grow text-secondary" role="status"> <span class="visually-hidden">加载中...</span> </div>
颜色自定义
你可以通过添加不同的颜色类来改变加载器的颜色。
<div class="spinner-border text-success" role="status"> <span class="visually-hidden">加载中...</span> </div> <div class="spinner-grow text-danger" role="status"> <span class="visually-hidden">加载中...</span> </div>
自定义大小和形状
你可以通过添加额外的 CSS 类来自定义加载器的大小和形状。
调整大小
通过调整 width 和 height 属性来改变加载器的大小。
<div class="spinner-border" style="width: 3rem; height: 3rem;" role="status"> <span class="visually-hidden">加载中...</span> </div> <div class="spinner-grow" style="width: 3rem; height: 3rem;" role="status"> <span class="visually-hidden">加载中...</span> </div>
改变形状
虽然 Bootstrap 5 的加载器默认为圆形，但你可以通过 CSS 来改变其形状。
-- -------------------- ---- -------
-------
------------- -
-------------- --
-
--------
---- --------------------- ------------- ------------- ----- ------- ------ --------------
----- -------------------------------------
------使用加载器
在实际项目中，你可以将加载器与按钮、表单或其他交互元素结合使用，以提示用户操作正在进行中。
<button class="btn btn-primary" type="button" disabled> <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> 加载中... </button>
按钮中的加载器
将加载器嵌入到按钮中，当按钮被点击时显示加载状态。
<button type="button" class="btn btn-primary"> <span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span> 点击加载 </button>
自定义加载器
除了使用内置的加载器类之外，你还可以根据需求自定义加载器的样式。
使用 SVG
你可以使用 SVG 图像来创建更复杂的加载动画。
-- -------------------- ---- -------
---- ---------------------------------- --------------- -------
------- ------------ ---------- - -- ----
------- ------- ------- ------ --------------------- ---------------- -------------
---------
------
---- -----------------------
---- --------------- ---------- ----------- ---------- - -- ----
---- --------------------- --
------
------自定义 CSS
使用 CSS 动画来创建独特的加载器效果。
-- -------------------- ---- -------
-------
-------------- -
-------- -------------
--------- ---------
------ -----
------- -----
-
-------------- --- -
--------- ---------
------- --- ----- -----
-------- --
-------------- ----
---------- ------------- -- --------------- ---- ---- -- ---------
-
-------------- ---------------- -
---------------- ------
-
---------- ------------- -
-- -
---- -----
----- -----
------ --
------- --
-------- --
-
--- -
---- -----
----- -----
------ -----
------- -----
-------- --
-
---- -
---- -----
----- -----
------ --
------- --
-------- --
-
-
--------
---- ----------------------
-----------
-----------
------以上是关于 Bootstrap 5 加载器的详细教程。通过这些示例，你可以轻松地在你的 Web 应用中实现各种类型的加载器，从而改善用户体验。