Bootstrap5 加载效果

Bootstrap 5 加载效果

学习如何使用Bootstrap 5的Spinners、进度条、骨架屏等加载组件,为用户提供清晰的加载状态反馈。

Loading...

Spinners 旋转动画

使用Spinners向用户表明正在加载或处理中。Bootstrap提供边框旋转和生长旋转两种样式。

边框旋转动画 (Border spinner)
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
生长旋转动画 (Growing spinner)
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
尺寸调整
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...

进度条

使用进度条向用户显示任务或过程的完成百分比。

基础进度条
25%
40%
50%
75%
100%
条纹和动画进度条
多色进度条
交互式进度条演示
0%
进度: 0%

按钮加载状态

在按钮中集成加载状态,为用户提供操作反馈。

按钮中的Spinner
交互式按钮加载

点击上面的按钮查看加载效果,3秒后恢复。

占位符/骨架屏

使用占位符组件在内容加载前显示页面结构,提升用户体验。

基础占位符
占位符动画
卡片占位符示例

全屏加载遮罩

创建全屏加载遮罩,用于页面或重要操作加载时显示。

全屏加载示例

点击按钮查看全屏加载效果,3秒后自动关闭。