新版本1.4.2发布了。第一次升级到 1.4.x 版本请注意在1.4.0版本的重大变动,具体请阅读更新日志

设计规范

开发者文档

不同功能和样式的进度条。

不同功能

20%
40%
60%
80%
100%
  1. <div class="sui-progress">
  2. <div style="width: 20%;" class="bar">20%</div>
  3. </div>
  4. <div class="sui-progress progress-danger">
  5. <div style="width: 40%;" class="bar">40%</div>
  6. </div>
  7. <div class="sui-progress progress-success">
  8. <div style="width: 60%;" class="bar">60%</div>
  9. </div>
  10. <div class="sui-progress progress-warning">
  11. <div style="width: 80%;" class="bar">80%</div>
  12. </div>
  13. <div class="sui-progress progress-info">
  14. <div style="width: 100%;" class="bar">100%</div>
  15. </div>
和button的高度和功能都是一一对应的。

不同大小

60%
60%
60%
60%
  1. <div class="sui-progress progress-small">
  2. <div style="width: 60%;" class="bar">60%</div>
  3. </div>
  4. <div class="sui-progress">
  5. <div style="width: 60%;" class="bar">60%</div>
  6. </div>
  7. <div class="sui-progress progress-large">
  8. <div style="width: 60%;" class="bar">60%</div>
  9. </div>
  10. <div class="sui-progress progress-xlarge">
  11. <div style="width: 60%;" class="bar">60%</div>
  12. </div>

文字居中

30%
40%
50%
60%
  1. <div class="sui-progress progress-small">
  2. <div style="width: 30%;" class="bar"></div>
  3. <div class="bar-text">30%</div>
  4. </div>
  5. <div class="sui-progress">
  6. <div style="width: 40%;" class="bar"></div>
  7. <div class="bar-text">40%</div>
  8. </div>
  9. <div class="sui-progress progress-large">
  10. <div style="width: 50%;" class="bar"></div>
  11. <div class="bar-text">50%</div>
  12. </div>
  13. <div class="sui-progress progress-xlarge">
  14. <div style="width: 60%;" class="bar"></div>
  15. <div class="bar-text">60%</div>
  16. </div>

带条纹

  1. <div class="sui-progress progress-striped">
  2. <div style="width: 60%;" class="bar"></div>
  3. </div>
  4. <div class="sui-progress progress-danger progress-striped">
  5. <div style="width: 60%;" class="bar"></div>
  6. </div>
  7. <div class="sui-progress progress-success progress-striped">
  8. <div style="width: 60%;" class="bar"></div>
  9. </div>
  10. <div class="sui-progress progress-warning progress-striped">
  11. <div style="width: 60%;" class="bar"></div>
  12. </div>
  13. <div class="sui-progress progress-info progress-striped">
  14. <div style="width: 60%;" class="bar"></div>
  15. </div>

动态进度条

  1. <div class="sui-progress progress-striped active">
  2. <div style="width: 60%;" class="bar"></div>
  3. </div>
  4. <div class="sui-progress progress-danger progress-striped active">
  5. <div style="width: 60%;" class="bar"></div>
  6. </div>
  7. <div class="sui-progress progress-success progress-striped active">
  8. <div style="width: 60%;" class="bar"></div>
  9. </div>
  10. <div class="sui-progress progress-warning progress-striped active">
  11. <div style="width: 60%;" class="bar"></div>
  12. </div>
  13. <div class="sui-progress progress-info progress-striped active">
  14. <div style="width: 60%;" class="bar"></div>
  15. </div>

分段

  1. <div class="sui-progress">
  2. <div style="width: 40%;" class="bar bar-success"></div>
  3. <div style="width: 20%;" class="bar bar-danger"></div>
  4. <div style="width: 10%;" class="bar bar-warning"></div>
  5. </div>