<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>进度条</title>
<style>
html,
body {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: #fff;
}
.progress {
width: 300px;
height: 150px;
position: relative;
display: flex;
justify-content: center;
overflow: hidden;
}
.progress-outer {
position: absolute;
bottom: 0;
left：20px;
width: 300px;
height: 150px;
background: repeating-linear-gradient(to right, #f83600, #facc22);
border-top-left-radius: 150px;
border-top-right-radius: 150px;
transform-origin: center bottom;
transform: rotate(180deg);
}
.progress-inner {
position: absolute;
bottom: 0;
width: 260px;
height: 130px;
background-color: #fff;
border-top-left-radius: 130px;
border-top-right-radius: 130px;
}
.progress-pointer {
position: absolute;
width: 2px;
height: 130px;
background-color: #fff;
transform: rotate(-90deg);
transform-origin: center bottom;
}
.progress-pointer>img {
width: 40px;
height: 40px;
position: absolute;
left: -20px;
top: -30px;
}
</style>
</head>
<body>
<div class="progress">
<div class="progress-outer"></div>
<div class="progress-inner"></div>
</div>
<div class="progress-pointer">
<img src="https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/36d2a58fe1384c3b852c3b993fb15c71~tplv-k3u1fbpfcp-watermark.image?" alt="" />
</div>
<button class="add">+</button>
<script>
var outer = document.querySelector(".progress-outer");
var addBtn = document.querySelector(".add");
var pointer = document.querySelector(".progress-pointer")
var deg = 10;
var initial = 180;
var initial1 = -90;
addBtn.addEventListener("click", (e) => {
// console.log(outer.style);
if (initial1 === 90) initial1 = -90;
if (initial === 360) initial = 180;
initial = initial + deg;
initial1 = initial1 + deg;
outer.style.transform = `rotate(${initial}deg)`;
pointer.style.transform = `rotate(${initial1}deg)`;
})
</script>
</body>
</html>
