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>

amazeui学习笔记--css（常用组件13）--进度条Progress的更多相关文章

  1. amazeui学习笔记--css（常用组件16）--文章页Article

    amazeui学习笔记--css(常用组件16)--文章页Article 一.总结 1.基本使用:文章内容页的排版样式,包括标题.文章元信息.分隔线等样式. .am-article 文章内容容器 .a ...

  2. amazeui学习笔记--css（常用组件15）--CSS动画Animation

    amazeui学习笔记--css(常用组件15)--CSS动画Animation 一.总结 1.css3动画封装:CSS3 动画封装,浏览器需支持 CSS3 动画. Class 描述 .am-anim ...

  3. amazeui学习笔记--css（常用组件14）--缩略图Thumbnail

    amazeui学习笔记--css(常用组件14)--缩略图Thumbnail 一.总结 1.基本样式:在 <img> 添加 .am-thumbnail 类:也可以在 <img> ...

  4. amazeui学习笔记--css（常用组件12）--面板Panel

    amazeui学习笔记--css(常用组件12)--面板Panel 一.总结 1.面板基本样式:默认的 .am-panel 提供基本的阴影和边距,默认边框添加 .am-panel-default,内容 ...

  5. amazeui学习笔记--css（常用组件11）--分页Pagination

    amazeui学习笔记--css(常用组件11)--分页Pagination 一.总结 1.分页使用:还是ul包li的形式: 分页组件,<ul> / <ol> 添加 .am-p ...

  6. amazeui学习笔记--css（常用组件10）--导航条Topbar

    amazeui学习笔记--css(常用组件10)--导航条Topbar 一.总结 1. 导航条:就是页面最顶端的导航条:在容器上添加 .am-topbar class,然后按照示例组织所需内容.< ...

  7. amazeui学习笔记--css（常用组件9）--导航nav

    amazeui学习笔记--css(常用组件9)--导航nav 一.总结 1.导航基本使用:<ul> 添加 .am-nav class 以后就是一个基本的垂直导航.默认样式中并没有限定导航的 ...

  8. amazeui学习笔记--css（常用组件8）--列表list

    amazeui学习笔记--css(常用组件8)--列表list 一.总结 1.链接列表:就是多个链接在一起组成的列表, 使用 <ul> 结构嵌套链接列表,添加 .am-list.还是ui包 ...

  9. amazeui学习笔记--css（常用组件7）--输入框组Input-group

    amazeui学习笔记--css(常用组件7)--输入框组Input-group 一.总结 1.使用:Input group 基于 Form 组件和 Button 组件扩展,依赖这两个组件.在容器上添 ...

随机推荐

  1. tee---将数据重定向到文件，

    tee命令用于将数据重定向到文件,另一方面还可以提供一份重定向数据的副本作为后续命令的stdin.简单的说就是把数据重定向到给定文件和屏幕上. 存在缓存机制,每1024个字节将输出一次.若从管道接收输 ...

  2. pip-window安装

    windows 安装: 保证计算机联网直接使用cmd 执行 python -m pip install -U pip 自动安装 找到 python安装的路径 C:\Users\Administrato ...

  3. P2186 小Z的栈函数

    P2186 小Z的栈函数 题目描述 小Z最近发现了一个神奇的机器,这个机器的所有操作都是通过维护一个栈来完成的,它支持如下11个操作: NUM X:栈顶放入X. POP:抛弃栈顶元素. INV:将栈顶 ...

  4. ESP8266学习笔记4：ESP8266的SmartConfig

    今天花了将近一天的时间来研究ESP8266的SmartConfig功能,这个应该算是wifi云产品的标配.这篇文章先把SmartConfig操作一遍,我还写了还有一篇文章梳理了物理层的详细协议,点击这 ...

  5. eclipse部署maven web项目到tomcat服务器时，没有将lib、web.xml复制过去的解决办法

    我这几天在写项目的时候发现自己以前的项目能够访问,隔一段时间写的这个项目却不能够访问,没有发现代码的逻辑错,但是就是访问不了jsp页面,项目一发布就是出现404错误,后来发现原来是发布到tomcat上 ...

  6. python-实现xml字符串替换功能

    今天遇到一个问题,说的是要把一个android res目录下,所有name=xx的字符串的值,自己参照网上的方法,写了一个脚本.记录如下,方便以后使用 #!/usr/bin/python # -*- ...

  7. ElasticSearch概述和定义

    福利 => 每天都推送 欢迎大家,关注微信扫码并加入我的4个微信公众号:   大数据躺过的坑      Java从入门到架构师      人工智能躺过的坑         Java全栈大联盟   ...

  8. go 可以开发桌面应用

    go 可以开发桌面应用 go 可以开发桌面应用,但并不是很舒适.可以使用的GUI库有:1.goqt,LiteIDE作者出品,Go和QT的绑定,还未发布2.go.uik,纯Go实现的并发UI工具3.wa ...

  9. Java(标识符，关键字，注释，常量，变量)

    标识符 在java程序中有些名字是可以自定义的,那么这些自定义的名字我们就称作为自定义的标识符. 标识符要注意的细节: 标识符的组成元素是由字母(a-zA-Z).数字(0-9).下划线(_).美元符号 ...

  10. [Python] String Formatting

    One particularly useful string method is format. The format method is used to construct strings by i ...