23. CSS | progress进度条的美容日记

让我垂下眼眸的 不止默认的颜
让我依依不舍的 不止你的留恋
余路还要走多久 你拉着我的手
让我万分期待的 是焕然的一新
和我在css的道路走一走……
—— 题记，改自《成都》

正文

progress，美 [prə'ɡres]，英 [prəʊ'ɡres]，顾名思义，进度条，作为展现任务进度，是一个很好的选择。在<progress>标签没出现前，一般套div或其他实现，相对稍复杂，html5的<progress>带来了极大的便利。一起看看吧，先上个效果图：

效果图

举个例子

<progress value="70" max="100">70 %</progress>

max
表示进度条的最大值，也就是满值
value
表示当前值，<= max
【max跟value两者要相对，不可能max 为1，value=11】

我们看看运行效果，目前的chrome环境下，默认是绿色值，灰色条，矩形，如下：

Paste_Image.png

当然，这肯定不符合前端人员的审美观，别担心，事情总会有解决方法的，利用-webkit-progress-bar，-webkit-progress-value属性。

-webkit-progress-bar：改变总进度条的样式，比如说背景色：

::-webkit-progress-bar {
   background-color: #eee;
}

效果图.png

-webkit-progress-value改变进度条值的样式，比如说背景色：

::-webkit-progress-value {
    background-color: orange;
}

效果图.png

继续为进度条加个边框

progress {
    position: absolute;
    top: 40%;
    left: 5%;
    width: 90%;
    height: 1rem;
    border: 2px solid #000;
}

边框.png

如果想要边角有弧度，柔和感，不要这么硬的矩形，border-radius上来：

progress {
    position: absolute;
    top: 40%;
    left: 5%;
    width: 90%;
    height: 1rem;
    border: 2px solid #000;
    border-radius: 2rem;
}

border-radius.png

有没有发现，仅在progress上追加并没有达到想要的效果，转念一想，都添加border-radius是不是就好了呢：

效果.png

讲的相对浅显，最后代码：

progress {
    position: absolute;
    top: 39%;
    left: 9%;
    width: 50%;
    height: 1rem;
    border: 2px solid #000;
    border-radius: 1rem;
    -webkit-apperance: none;
}
::-webkit-progress-bar {
  background-color: #eee;
    border-radius: 1rem;
}
::-webkit-progress-value {
    background-color: orange;
    border-radius: 1rem;
}

手机端兼容.png

参考文章：
https://developer.mozilla.org/zh-CN/docs/Web/CSS/::-webkit-progress-bar
http://www.zhangxinxu.com/wordpress/2013/02/html5-progress-element-style-control/