CSS+JS 实现动态曲线进度条
由于系统UI风格升级,产品童鞋和UI童鞋总是想要搞点儿事情出来,项目页面上的进度条从直线变成了曲线,哈哈,好吧,那就迎难而上
实现效果:
1.简单搞一搞 CSS , 此处代码有折叠
.process {
width: 110px;
box-sizing: border-box;
margin: 0 auto;
height: 55px;
overflow: hidden;
}
.ring-def {
width: 110px;
height: 55px;
border-radius: 110px 110px 0 0;
border: 2px solid #E5E5E5;
border-bottom: none;
box-sizing: border-box;
}
.ring-color {
width: 110px;
height: 55px;
border-radius: 0 0 110px 110px;
border: 2px solid #ff6200;
border-top: none;
box-sizing: border-box;
transform-origin: top;
transition: 1s;
}
p {
text-align: center;
color: #828282;
}
input,
button {
width: 45px;
height: 30px;
line-height: 30px;
color: #828282;
font-size: 14px;
outline: none;
border: 1px solid #dddddd;
text-align: center;
}
分析一下实现思路:
-
想要曲线效果,首先就能想到 border-radius 属性
-
两个大小宽高一致的div,设置不同的边款颜色,一个隐藏,一个显示
-
动态获取进度条时,隐藏的半圆,通过角度换算,旋转显示对应角度的弧长
搞事情,不多说,上代码
<div class="process">
<div class="ring-def"></div>
<div class="ring-color" id="ringColor"></div>
</div>
<p>
设置进度条:<input type="number" max="100" min="0" id="procNum"> % <button id="btn" onclick="getProcess()">确定</button>
</p>
<script>
function getProcess() {
// 此处input用户输入 模拟真实请求返回数据
var val = document.getElementById('procNum').value
var tmp = val <= 0 ? 0 : val >= 100 ? 100 : val
document.getElementById('procNum').value = tmp
var deg = Math.floor(tmp / 100 * 180)
document.getElementById('ringColor').style.transform = 'rotate(' + deg + 'deg)'
}
</script>