基础 斑马条纹效果

基础

  • 通过这些简单、灵活的进度条，为当前工作流程或动作提供实时反馈。 组件提供基类 progress 和四个能适应情景应用或典型 UI 设计使用的叠加类，只需在 .progress-bar 层中引用 .bar-success，.bar-warning，.bar-danger 或 .bar-disabled 其中之一即可。
  • 进度条组件有固定的 html 结构，详情请参考代码示例。
实例
.bar-success
default
.bar-warning
.bar-danger
.bar-disabled
            
<div class="progress">
  <div class="progress-bar ( bar-success / bar-warning / bar-danger / bar-disabled )" style="width: xxx;"></div>
</div>

斑马条纹效果

  • 通过渐变可以为进度条创建条纹效果，IE9 及更低版本不支持。
  • 进度条组件使用了 CSS3 的 transition 和 animation 属性来完成一些特效。这些特性在 IE9 或以下版本中、Firefox 的老版本中没有被支持。Opera 12 不支持 animation 属性。
实例
.bar-success
default
.bar-warning
.bar-danger
.bar-disabled
            
<div class="progress">
  <div class="progress-bar bar-striped" style="width: xxx;"></div>
</div>
  • 把多个 .progress-bar 放入同一个 .progress 中，使它们呈现堆叠的效果。
实例
            
<div class="progress">
  <div class="progress-bar" style="width: xxx;"></div>
  <div class="progress-bar" style="width: xxx;"></div>
  ...
</div>
  • BrickPlus 提供了三种尺寸的进度条去适应的不同的设计需求，其中二种非常规尺寸需通过给 .progress 层叠加类 .size-l、.size-s 展示。
实例
.size-l
default
.size-s
            
<div class="progress ( size-l / size-s )">
  <div class="progress-bar" style="width: xxx;"></div>
</div>
  • 在 .progress-bar 在输入字符串实现。
  • 在展示很低的百分比时，需要让文本提示能够清晰可见，可以为进度条设置 min-width 属性。
  • 仅适用引用 .size-l 的进度条。
  • 进度条的 screen reader 辅助功能通过 title 实现。
实例
60%
            
<div class="progress">
  <div class="progress-bar" style="width: xxx; min-width: xxx;"></div>
</div>