javascript - 求一个进度条插件在手机端上的
本文介绍了javascript - 求一个进度条插件在手机端上的的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
类似这种效果的，有什么好的插件吗，或者自己写怎么写，要求能自适应。
解决方案
这个亲手撸也不过十分钟吧?
<!DOCTYPE html>
<html>
<head>
<title>progress bar</title>
</head>
<body>
<div class=progress-bar>
<div class=item>
<div class=cycle></div>
<div class=text>提交</div>
</div>
<div class="active item">
<div class=cycle></div>
<div class=text>人力审核</div>
</div>
<div class=item>
<div class=cycle></div>
<div class=text>审核完成发放</div>
</div>
</div>
</body>
</html>
body {
background-color: white;
}
.progress-bar {
display: flex;
flex-direction: row;
}
.item {
display: flex;
width: 1%;
flex-grow: 1;
padding-top: 20px;
justify-content: center;
position: relative;
padding-top: 20px;
}
.item:first-child,
.item:last-child {
width: auto;
flex-grow: 0;
flex-shrink: 0;
}
.item > .cycle {
z-index: 2;
position: absolute;
top: 5px;
left: 50%;
margin-left: -5px;
width: 10px;
height: 10px;
border-radius: 50%;
background-color: red;
}
.item.active > .cycle {
top: 1px;
margin-left: -9px;
width: 18px;
height: 18px;
}
.item:before, .item:after {
z-index: 1;
content: "";
width: 50%;
height: 6px;
position: absolute;
top: 7px;
background-color: red;
}
.item:before {
left: 0;
}
.item:after {
left: 50%;
}
.item:first-child:before,
.item:last-child:after {
display: none;
}
.item.active:after,
.item.active ~ .item:before,
.item.active ~ .item.after,
.item.active ~ .item > .cycle {
background-color: #999;
}在线demo: http://runjs.cn/code/dyhmavqe
这篇关于javascript - 求一个进度条插件在手机端上的的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
