<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.circle-container {
position: relative;
float: left;
width: 120px;
height: 120px;
}
.circle-item {
position: absolute;
left: 10px;
top: 10px;
width: 100px;
height: 100px;
border-radius: 50%;
background: linear-gradient(to top left, #1890FF 10%, #10C2C1 60%, #73D642 100%);
}
.circle-left-wrap,
.circle-right-wrap {
position: absolute;
left: 0;
top: 0;
width: 50px;
height: 100px;
overflow: hidden;
}
.circle-right-wrap {
left: 50px;
}
.left,
.right {
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 100px;
border-radius: 50%;
background: #ddd;
}
.left {
clip: rect(0, 50px, auto, 0);
}
.right {
clip: rect(0, auto, auto, 50px);
left: -50px;
}
.mask {
position: absolute;
top: 5px;
left: 5px;
width: 90px;
height: 90px;
border-radius: 50%;
background-color: #fff;
display: flex;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<div class='circle-container'>
<div class="circle-item">
<div class="circle-left-wrap">
<div class="left" style="transform: rotate(30deg)"></div>
</div>
<div class="circle-right-wrap">
<div class="right" style="transform: rotate(180deg)"></div>
</div>
<div class='mask'><span>100%</span><span>进度</span></div>
</div>
</div>
</body>
<script>
</script>
</html>
效果如图：
image.png
网友评论