自制的简单进度条
年前公司上H5活动，有个进度条功能，设计稿是这样的：
这里只分享思路和功能，也记录一下
- 思路：给底部设一个总长度，然后分成五份，在底部上方再设一个红色的进度条，通过控制宽度来实现进度效果
html部分
1 <div class="pro" id="pro"> <!-- 底部 --> 2 <div class="pro_red" id="pro_red"></div> <!-- 红色进度条 --> 3 </div> 4 <div class="cishu"> <!-- 下面的次数 --> 5 <span class="ci1">0次</span> 6 <span class="ci2">10次</span> 7 <span class="ci3">20次</span> 8 <span class="ci4">30次</span> 9 <span class="ci5">40次</span> 10 <span class="ci6">50次</span> 11 </div>
css部分
1 /* 灰色底部 */ 2 .pro { 3 background: #ccc; 4 height: 10px; 5 width: 250px; 6 border-radius: 10px; 7 position: relative; 8 9 } 10 11 /* 红色进度条 */ 12 .pro_red { 13 width:0; /* 这里必须设置宽度，防止滑动效果生硬 */ 14 height: 10px; 15 background: red; 16 border-radius: 10px; 17 position: absolute; 18 top: 0; 19 transition: width 2s; 20 -moz-transition: width 2s; 21 -webkit-transition: width 2s; 22 -o-transition: width 2s; 23 position: relative; 24 } 25 26 /* 小滑块 */ 27 .pro_red::after{ 28 content: ''; 29 display: block; 30 width: 20px; 31 height: 20px; 32 background:cadetblue; 33 position: absolute; 34 top:-5px; 35 right: 0px; 36 z-index: 10; 37 } 38 .cishu{ 39 margin-top:10px; 40 width: 250px; 41 font-size: 12px; 42 display: flex; 43 } 44 .title{ 45 font-size: 14px; 46 margin-bottom: 20px; 47 } 48 .ci2{ 49 margin-left: 10px; 50 display: inline-block; 51 position: relative; 52 53 } 54 .ci2::after,.ci3::after,.ci4::after,.ci5::after,.ci6::after{ 55 content: ''; 56 display: block; 57 height: 5px; 58 width: 5px; 59 background:blueviolet; 60 border-radius: 50%; 61 position: absolute; 62 top:-18px; 63 left:10px; 64 } 65 .ci3{ 66 margin-left: 25px; 67 position: relative; 68 } 69 .ci4{ 70 margin-left: 23px; 71 position: relative; 72 } 73 .ci5{ 74 margin-left: 23px; 75 position: relative; 76 } 77 .ci6{ 78 margin-left: 18px; 79 position: relative; 80 }
js部分
1 window.onload = function () { 2 const pro_red = document.getElementById('pro_red') 3 function getPerNum(per){ 4 pro_red.style.width = per+'%' 5 } 6 7 getPerNum(60) //宽度 8 }
这里封装了一个方法getPerNum()，这里就可以通过后台返回的百分比，来控制进度条的长度显示。
效果图如下：
实际项目是用vue框架做的，样式改一下就可以了。
