通过这些简单、灵活的进度条,为当前工作流程或动作提供实时反馈。
跨浏览器兼容性
进度条组件使用了 CSS3 的 transition 和 animation 属性来完成一些特效。这些特性在 Internet Explorer 9 或以下版本中、Firefox 的老版本中没有被支持。Opera 12 不支持 animation 属性。
基本实例
默认样式的进度条
带有提示标签的进度条
将设置了 .sr-only
类的 <span>
标签从进度条组件中移除 类,从而让当前进度显示出来。
在展示很低的百分比时,如果需要让文本提示能够清晰可见,可以为进度条设置 min-width
属性。
根据情境变化效果
进度条组件使用与按钮和警告框相同的类,根据不同情境展现相应的效果。
条纹效果
通过渐变可以为进度条创建条纹效果,IE9 及更低版本不支持。
动画效果
为 .progress-bar-striped
添加 .active
类,使其呈现出由右向左运动的动画效果。IE9 及更低版本的浏览器不支持。
堆叠效果
把多个进度条放入同一个 .progress
中,使它们呈现堆叠的效果。