【H5 CSS】progress元素样式

progress

以下是progress的基本标签

<progress></progress>

根据w3c的定义，progress元素代表任务的完成度。一个progress元素标签有开始标签和结束标签。

除了通用的全局属性外，它还拥有两个自己的属性

• max -表示有多少任务需要完成。如果未设置，默认为1.0
• value -表示现在的完成的进度。value的取值最好是 0.0<=value<=1.0

进度条的状态

一个进度条有两种状态：不确定和已确定

1. 不确定-即进行中
   基于不同的浏览器和操作系统，进度条的展现都是不一样的。

   设置不确定进度条的样式是很简单的，因为它不包括value属性。可以利用css选择器not() 去设置它。

   progress:not([value]) {
           /* Styling here */
       }
   

2. 已确定-即已完成

   在文本中，一般将只关注如何设计进度条的确定状态，因此一般通过添加max和value属性来更改状态。

   <progress max="100" value="80