這篇文章主要介紹js如何實現(xiàn)自定義進度條效果，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！
創(chuàng)新互聯(lián)專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務，包含不限于成都網(wǎng)站建設、
做網(wǎng)站、銅川網(wǎng)絡推廣、
重慶小程序開發(fā)、銅川網(wǎng)絡營銷、銅川企業(yè)策劃、銅川品牌公關、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運營等，從售前售中售后，我們都將竭誠為您服務，您的肯定，是我們大的嘉獎；創(chuàng)新互聯(lián)為所有大學生創(chuàng)業(yè)者提供
銅川建站搭建服務，24小時服務熱線：18982081108，官方網(wǎng)址：www.cdcxhl.com
效果圖：
代碼如下：
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);}
重慶分公司
重慶分公司
