渐变环形进度条

最新推荐文章于 2024-05-17 13:52:13 发布

皮皮猴我们走

最新推荐文章于 2024-05-17 13:52:13 发布

阅读量209

点赞数 1

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/Rob_gao/article/details/136626840

版权

<!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>