https://v5.bootcss.com/docs/components/spinners/
Bootstrap 的旋转器(spinners)用于指示组件或页面的加载状态,该组件是纯粹使用 HTML 和 CSS 实现的,没有任何 JavaScript 代码。
环状旋转器(Border spinner)
创建一个环状选择器
使用环状旋转器(border spinner)作为轻量级的加载指示器。要创建环状选择器,可以添加类.spinner-border
。
例如:
设置颜色
https://v5.bootcss.com/docs/components/spinners/#%E9%A2%9C%E8%89%B2
环状旋转器(border spinner)使用 currentColor 来设置其 border-color,这意味着你可以使用 文本颜色工具类 来自定义其颜色。你可以将任何文本颜色工具类应用到标准的旋转器(spinner)上。
为什么不使用 border-color 工具类呢? 因为每个环状旋转器( border spinner)至少为一个侧边设置了 transparent (透明)边框,而 .border-{color}
工具类将会覆盖该设置。
例如,使用.text-primary
类的颜色:
增长式旋转器(Growing spinner)
创建增长式旋转器
添加类.spinner-grow
来创建增长式选择器。从技术来说它不是在旋转,但它是反复由小变大的。
修改增长式选择器的颜色
同样,这个旋转器也是使用 currentColor 来设置其 border-color 的,因此你可以使用 文本颜色工具类 轻松更改其外观。
例如:
设置旋转器的大小
https://v5.bootcss.com/docs/components/spinners/#%E5%B0%BA%E5%AF%B8
通过添加 .spinner-border-sm
和 .spinner-grow-sm
类可以让旋转器(spinner)变得更小,以便在其它组件中使用。
例如:
按钮
https://v5.bootcss.com/docs/components/spinners/#%E6%8C%89%E9%92%AE
在按钮中使用旋转器(spinners)来指示当前正在处理或正在进行的操作。还可以将旋转器(spinner)中包含的(提示性)文字去掉并使用按钮中包含的文字作为提示性信息。
例如:
环状旋转器:
增长式旋转器:
禁用按钮: