效果图：
代码如下：
Staged progress bar *{margin:0;padding:0;} html,body{height:100%;} ul{list-style:none;} .cf:after{content:"";display:block;clear:both;height: 0;} #bar{height:20px;margin:100px 10px; margin-left: 50px} #bar div{float:left;position:relative;} #bar .staged, #bar .progress{border-color:#4CA8FF;} #bar .staged i{position:relative;overflow:hidden;display:block;width:inherit;height:inherit;} #bar .staged i:before{content:"";display:block;width:0;height:inherit;border-radius:50%;} #bar .progress {width:120px;height:inherit;margin-left:-4px;z-index:1;border-style:solid;border-width:2px 0;} #bar .progress:nth-child(2) i{border-left-width:2px;border-top-left-radius:6px;border-bottom-left-radius:6px;} #bar .progress:nth-child(2){border-left-width:2px;border-top-left-radius:10px;border-bottom-left-radius:10px;} #bar .progress:last-child{border-right-width:2px;border-top-right-radius:10px;border-bottom-right-radius:10px;} #bar .progress i{width:0;height:inherit;display:block;border-radius:0 10px 10px 0;position:relative;font-style:normal;} #bar .progress, #bar .staged{background:#7d7d7d;} #bar .sp i:before, #bar .progress i{background:#4CA8FF;} #bar .staged:not(:first-child){margin-left:-4px; } #bar .staged:before{position:absolute;content:attr(data-text);width:inherit;height:inherit;top:90%;left:0;} #bar .staged:after{content:attr(data-value);color:#fff;width:inherit;height:inherit;position:absolute;top:0;left:0;} #bar .sp i:before{width:100%;transition:width 1s;} .msg:before, .msg:after{display:block;position:absolute;border-style:solid;border-color:#ccc;background:#fff;top:30px;} .msg:before{content:attr(data-text);width:200px;height:40px;line-height:40px;font-size:12px;text-align:center;border-radius:4px;border-width:1px;top:-68px;left:calc(100% - 114px);} .msg:after{content:"";width:14px;height:14px;transform:rotate(45deg);border-width:0 1px 1px 0;top:-34px;left:calc(100% - 20px);}
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持考高分网！
