阅读量:0
Bootstrap 提供了一个内置的 Spinner 组件，可以很容易地为你的项目添加一个简单的 CSS 动画效果。要实现 Bootstrap spinner 的动画效果，请按照以下步骤操作：
首先，确保已将 Bootstrap 4 或更高版本的 CSS 和 JavaScript 文件添加到项目中。可以通过 CDN 引入，也可以通过 npm 安装。
在 HTML 文件中，创建一个包含 “spinner-border” 类的元素。这将创建一个边框形状的 spinner。示例代码如下：
<div class="spinner-border" role="status"> <span class="sr-only">Loading...</span> </div> - 若要自定义 spinner 的大小，可以使用 “spinner-border-sm” 类来创建一个较小的 spinner。示例代码如下：
<div class="spinner-border spinner-border-sm" role="status"> <span class="sr-only">Loading...</span> </div> - 若要改变 spinner 的颜色，可以添加 Bootstrap 文本颜色类，例如 “text-primary”、“text-success” 等。示例代码如下：
<div class="spinner-border text-primary" role="status"> <span class="sr-only">Loading...</span> </div> - 若要创建一个带有文本的 spinner，可以在 “spinner-border” 元素内部添加一个带有 “sr-only” 类的 “span” 元素。这将确保屏幕阅读器用户能够获取到相关信息。示例代码如下：
<div class="spinner-border" role="status"> <span class="sr-only">Loading...</span> </div> - 若要创建一个带有旋转动画的 Grow spinner，可以使用 “spinner-grow” 类。示例代码如下：
<div class="spinner-grow" role="status"> <span class="sr-only">Loading...</span> </div> - 若要自定义 Grow spinner 的大小，可以使用 “spinner-grow-sm” 类来创建一个较小的 spinner。示例代码如下：
<div class="spinner-grow spinner-grow-sm" role="status"> <span class="sr-only">Loading...</span> </div> - 若要改变 Grow spinner 的颜色，可以添加 Bootstrap 文本颜色类，例如 “text-primary”、“text-success” 等。示例代码如下：
<div class="spinner-grow text-primary" role="status"> <span class="sr-only">Loading...</span> </div> 通过上述步骤，你可以在项目中实现 Bootstrap spinner 的动画效果。更多关于 Bootstrap spinner 的信息，请参考官方文档：https://getbootstrap.com/docs/5.0/components/spinners/
