amazeui学习笔记--css(常用组件13)--进度条Progress
2024-10-21 09:38:48
amazeui学习笔记--css(常用组件13)--进度条Progress
一、总结
1、进度条基本使用:进度条组件,.am-progress
为容器,.am-progress-bar
为进度显示信息。
<div class="am-progress">
<div class="am-progress-bar" style="width: 30%"></div>
</div> <div class="am-progress">
<div class="am-progress-bar" style="width: 40%">40%</div>
</div>
2、进度条颜色:进度条默认为全局主色,在进度条上添加相应的类可设置的颜色:
.am-progress-bar-secondary
.am-progress-bar-success
.am-progress-bar-warning
.am-progress-bar-danger
3、进度条高度:在 .am-progress
添加 .am-progress-xs
.am-progress-sm
可以设置进度条高度。<div class="am-progress am-progress-sm">进度条bar</div>
4、进度条条纹(这个好看):在进度条容器上添加 .am-progress-striped
显示条纹效果,可结合进度条颜色 class 使用。
<div class="am-progress am-progress-striped">
<div class="am-progress-bar am-progress-bar-danger" style="width: 80%"></div>
</div>
5、进度条动画:进度条容器上添加 .am-active
激活进度条动画(CSS Animation)。
<div class="am-progress am-progress-striped am-progress-sm am-active ">
<div class="am-progress-bar am-progress-bar-secondary" style="width: 57%"></div>
</div>
6、进度条堆叠:直接 多个 am-progress-bar 即可
<div class="am-progress">
<div class="am-progress-bar" style="width: 65%">Male</div>
<div class="am-progress-bar am-progress-bar-success" style="width: 15%">Female</div>
<div class="am-progress-bar am-progress-bar-warning" style="width: 20%">Other</div>
</div>
二、进度条Progress
Progress
进度条组件,.am-progress
为容器,.am-progress-bar
为进度显示信息。
基本样式
Copy
40%
<div class="am-progress">
<div class="am-progress-bar" style="width: 30%"></div>
</div>
<div class="am-progress">
<div class="am-progress-bar" style="width: 40%">40%</div>
</div>
进度条颜色
进度条默认为全局主色,在进度条上添加相应的类可设置的颜色:
.am-progress-bar-secondary
.am-progress-bar-success
.am-progress-bar-warning
.am-progress-bar-danger
Copy
<div class="am-progress">
<div class="am-progress-bar" style="width: 15%"></div>
</div>
<div class="am-progress">
<div class="am-progress-bar am-progress-bar-secondary" style="width: 30%"></div>
</div>
<div class="am-progress">
<div class="am-progress-bar am-progress-bar-success" style="width: 45%"></div>
</div>
<div class="am-progress">
<div class="am-progress-bar am-progress-bar-warning" style="width: 60%"></div>
</div>
<div class="am-progress">
<div class="am-progress-bar am-progress-bar-danger" style="width: 75%"></div>
</div>
进度条高度
在 .am-progress
添加 .am-progress-xs
.am-progress-sm
可以设置进度条高度。
Copy
<div class="am-progress am-progress-xs">
<div class="am-progress-bar" style="width: 80%"></div>
</div>
<div class="am-progress am-progress-sm">
<div class="am-progress-bar" style="width: 60%"></div>
</div>
<div class="am-progress">
<div class="am-progress-bar" style="width: 40%"></div>
</div>
进度条条纹
在进度条容器上添加 .am-progress-striped
显示条纹效果,可结合进度条颜色 class 使用。
Copy
<div class="am-progress am-progress-striped">
<div class="am-progress-bar am-progress-bar-danger" style="width: 80%"></div>
</div>
<div class="am-progress am-progress-striped">
<div class="am-progress-bar am-progress-bar-warning" style="width: 60%"></div>
</div>
<div class="am-progress am-progress-striped">
<div class="am-progress-bar am-progress-bar-success" style="width: 45%"></div>
</div>
<div class="am-progress am-progress-striped">
<div class="am-progress-bar am-progress-bar-secondary" style="width: 30%"></div>
</div>
<div class="am-progress am-progress-striped">
<div class="am-progress-bar" style="width: 15%"></div>
</div>
进度条动画
进度条容器上添加 .am-active
激活进度条动画(CSS Animation)。
Copy
<div class="am-progress am-progress-striped am-progress-sm am-active ">
<div class="am-progress-bar am-progress-bar-secondary" style="width: 57%"></div>
</div>
进度条堆叠
Copy
Male
Female
Other
<div class="am-progress">
<div class="am-progress-bar" style="width: 65%">Male</div>
<div class="am-progress-bar am-progress-bar-success" style="width: 15%">Female</div>
<div class="am-progress-bar am-progress-bar-warning" style="width: 20%">Other</div>
</div>
最新文章
- sublime text主要快捷键列表
- 用ildasm/ilasm修改IL代码
- BZOJ 1706: [usaco2007 Nov]relays 奶牛接力跑
- 关于Eclipse中的egit的常规使用和模板
- 【USACO 2.3.5】控制公司
- C# char[]与string之间的相互转换
- 差分硬盘的merge(合并差异)实验分析
- 亲测有效!一种完美动态阈值白平衡算法 Java实现。
- CSS样式----盒子模型(图文详解)
- 从Unity中的Attribute到AOP(三)
- checkbox/input文本框与文字对齐
- [HAOI2012]高速公路
- discuz7.2 faq.php 注入漏洞分析
- (三)underscore.js框架Objects类API学习
- 解决 ";Script Error"; 的另类思路
- 原生js 数组的迭代的方法
- vue-cli+webpack在生成的项目中使用bootstrap方法(二)
- js 操作json对象增删改
- BZOJ 1029: [JSOI2007]建筑抢修 优先队列
- 通过UNIX域套接字传递描述符和 sendmsg/recvmsg 函数
热门文章
- 【Codeforces Round #460 (Div. 2) A】 Supermarket
- 如日中天的Uber到底是用什么开发语言做到的?
- jquery插件库http://www.jq22.com/
- 70.nodejs操作mongodb
- es6 -- Iterator 和 for...of 循环
- storm排错
- 韦东山ARM裸机笔记(1)
- lastb---显示用户错误的登录列表
- 【Uva 1632】Alibaba
- springboot整合Beetl、BeetlSql实现ajax分页