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/