Bootstrap 5 加载动画

Bootstrap 5 类使用 "spinners" 来指示应用程序中的加载状态。它们仅使用 HTML 和 CSS 构建；因此，您不需要 JavaScript 来制作它们。使用我们令人难以置信的实用程序类，您可以简单地修改它们的外观、对齐方式和大小。要切换它们的可见性，您需要编写一些自定义 JavaScript。

基本 spinners

基本的 spinner 在网页上使用 "spinner-border" 类。我们可以将文本与 spinner 一起使用。spinner 文本可以根据用户要求可见或隐藏。

语法

以下语法显示了如何使用 bootstrap 5 类创建 spinner。

示例

该示例根据用户要求显示基本和默认的 spinners。

输出

下图显示了网页上的基本 spinner。

Bootstrap 5 彩色 spinners

彩色 spinner 在网页上使用 "spinner-border" 以及 "text-*" 类。我们可以将 bootstrap 5 上下文类（如 primary、secondary 和 muted）与 spinner 一起使用。彩色 spinner 根据 Web 应用程序格式和用户要求使用。

语法

以下语法显示了如何使用 bootstrap 5 类创建彩色 spinner。

示例

该示例根据用户要求显示基本、默认和彩色 spinners。

输出

下图显示了网页上的彩色 spinners。

Bootstrap 5 增长的 spinners

增长的 spinner 在网页上使用 "spinner-grow" 类。增长的 spinner 在 <div> 标记中使用上下文颜色。

语法

以下语法显示了如何使用 bootstrap 5 类创建增长的 spinner。

示例

该示例根据用户要求显示基本、默认和彩色 spinners。

输出

下图显示了网页上的增长的 spinners。

Spinner 大小

bootstrap 5 spinner 函数在网页上使用，具有所需的大小。我们可以根据大、默认和小尺寸设置 spinner。spinner 大小与 spinner-border 和 spinner-grow 类一起使用。

语法

以下语法显示了如何使用 bootstrap 5 类创建具有所需大小的 spinner。

以下语法显示了如何创建具有所需大小的增长的 spinner。

示例

该示例根据用户要求显示基本、默认和彩色 spinners。

输出

下图显示了网页上的增长的 spinners。

按钮 Spinner

Bootstrap 5 按钮 spinner 与按钮功能和大小一起使用。我们可以创建一个按钮，并将 spinner 标记放在按钮函数中。spinner 根据按钮大小和 Web 应用程序要求选择大小。

语法

以下语法显示了如何使用 bootstrap 5 类在具有所需大小的按钮中创建彩色 spinners。

示例

该示例根据用户要求显示按钮中的彩色 spinners。

输出

下图显示了网页上的按钮 spinners。

Spinner 边距

spinner 使用 "spinner-border" 和 "spinner-grow" 类以及所需的边距。

语法

以下语法显示了使用 bootstrap 5 类带边距大小的 spinner。

示例

该示例根据用户要求显示带有边距的基本 spinners。

输出

下图显示了网页上的基本 spinner。

Spinner 位置

spinner 使用 "spinner-border" 和 "spinner-grow" 类以及所需的位置。我们可以将其放置在网页的侧面的开头或结尾。

语法

以下语法显示了使用 bootstrap 5 类具有所需位置的 spinner。

示例

该示例根据用户要求显示基本和默认的 spinners。

输出

下图显示了网页上的基本 spinner。

结论

spinner 用于通知用户加载或等待。此功能用于了解加载 Web 应用程序的任何功能和特性。