progress标签及样式

progress标签及样式

代码使用

<progress value="49" max="100"></progress>

两个属性，一个是value，一个max 显而易见一个是进度的值，一个是总长度的值。

如果不给两个值的时候，就会出现类似于轮回的情况

对象属性

属性	内容
max	设置或返回进度条的 max 属性值。
position	返回进度条的当前位置。
value	设置或返回进度条的 value 属性值。
labels	返回进度条的标记列表（如有）。

浏览器兼容

Css样式

要根据不同浏览器做兼容

Chrome

progress{
    width: 150px;
    height: 25px;
    color:rgb(7, 151, 247);;
    border-radius:1rem;
    border: solid 1px rgb(4, 150, 248);
}
/* 表示总长度背景色 */
progress::-webkit-progress-bar{     
   background-color:#ffffff;
   border-radius:1rem;
}
/* 表示已完成进度背景色 */
progress::-webkit-progress-value{
     background-color:rgb(7, 151, 247);
     border-radius:1rem;
}

FireFox

progress{
    width: 168px;
    height: 5px;
    color:#f00;
    background:#EFEFF4;     /* 表示总长度背景色 */
    border-radius:1rem;
}
/* 表示已完成进度背景色 */
progress::-moz-progress-bar{
     background-color:#f00;
     border-radius:1rem;
}

IE10

progress{
    width: 168px;
    height: 5px;
    color:#ffffff;      /* 表示已完成进度背景色 */
    background:rgb(7, 151, 247);     /* 表示总长度背景色 */
    border-radius:1rem;
}