设计规范

开发者文档
不同功能和样式的进度条。
不同功能
- <div class="sui-progress">
- <div style="width: 20%;" class="bar">20%</div>
- </div>
- <div class="sui-progress progress-danger">
- <div style="width: 40%;" class="bar">40%</div>
- </div>
- <div class="sui-progress progress-success">
- <div style="width: 60%;" class="bar">60%</div>
- </div>
- <div class="sui-progress progress-warning">
- <div style="width: 80%;" class="bar">80%</div>
- </div>
- <div class="sui-progress progress-info">
- <div style="width: 100%;" class="bar">100%</div>
- </div>
和button的高度和功能都是一一对应的。
- 复制代码代码已复制
不同大小
- <div class="sui-progress progress-small">
- <div style="width: 60%;" class="bar">60%</div>
- </div>
- <div class="sui-progress">
- <div style="width: 60%;" class="bar">60%</div>
- </div>
- <div class="sui-progress progress-large">
- <div style="width: 60%;" class="bar">60%</div>
- </div>
- <div class="sui-progress progress-xlarge">
- <div style="width: 60%;" class="bar">60%</div>
- </div>
- 复制代码代码已复制
文字居中
- <div class="sui-progress progress-small">
- <div style="width: 30%;" class="bar"></div>
- <div class="bar-text">30%</div>
- </div>
- <div class="sui-progress">
- <div style="width: 40%;" class="bar"></div>
- <div class="bar-text">40%</div>
- </div>
- <div class="sui-progress progress-large">
- <div style="width: 50%;" class="bar"></div>
- <div class="bar-text">50%</div>
- </div>
- <div class="sui-progress progress-xlarge">
- <div style="width: 60%;" class="bar"></div>
- <div class="bar-text">60%</div>
- </div>
- 复制代码代码已复制
带条纹
- <div class="sui-progress progress-striped">
- <div style="width: 60%;" class="bar"></div>
- </div>
- <div class="sui-progress progress-danger progress-striped">
- <div style="width: 60%;" class="bar"></div>
- </div>
- <div class="sui-progress progress-success progress-striped">
- <div style="width: 60%;" class="bar"></div>
- </div>
- <div class="sui-progress progress-warning progress-striped">
- <div style="width: 60%;" class="bar"></div>
- </div>
- <div class="sui-progress progress-info progress-striped">
- <div style="width: 60%;" class="bar"></div>
- </div>
- 复制代码代码已复制
动态进度条
- <div class="sui-progress progress-striped active">
- <div style="width: 60%;" class="bar"></div>
- </div>
- <div class="sui-progress progress-danger progress-striped active">
- <div style="width: 60%;" class="bar"></div>
- </div>
- <div class="sui-progress progress-success progress-striped active">
- <div style="width: 60%;" class="bar"></div>
- </div>
- <div class="sui-progress progress-warning progress-striped active">
- <div style="width: 60%;" class="bar"></div>
- </div>
- <div class="sui-progress progress-info progress-striped active">
- <div style="width: 60%;" class="bar"></div>
- </div>
- 复制代码代码已复制
分段
- <div class="sui-progress">
- <div style="width: 40%;" class="bar bar-success"></div>
- <div style="width: 20%;" class="bar bar-danger"></div>
- <div style="width: 10%;" class="bar bar-warning"></div>
- </div>
- 复制代码代码已复制