<!DOCTYPE html>
<html lang="zh">
<head>
<meta http-equiv="Content-Type" charset="UTF-8">
<style>
.circle-progress {
width: 200px;
height: 200px;
position: relative;
border-radius: 50%;
overflow: hidden;
background-color: #f1f1f1;
background:
radial-gradient( closest-side circle, #AE7837 100%, transparent 100%) center top/10px 10px no-repeat,
conic-gradient(
#AE7837 0%,
#FFFAEB 40%,
#fff 40%,
#fff 41%
);
transform: rotate(216deg);
transition: transform 0.5s ease-in-out;
}
.circle-progress::before {
content: "";
display: block;
width: 180px;
height: 180px;
border-radius: 50%;
position: absolute;
background: #fff;
left: 10px;
top: 10px;
}
</style>
</head>
<body>
<div class="circle-progress"></div>
</body>
</html>
效果图