svg画圆形进度条 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		.circle__progress--path01{
			stroke:#006600;
			fill-opacity: 0;
			stroke-linecap:round;
			stroke-width: 3;
			stroke-dasharray:238;//圆周长
			stroke-dashoffset:0;
			animation: myfirst 5s;
			animation-timing-function:linear;
			animation-iteration-count:infinite;
		}
		@keyframes myfirst
		{
		    from {
				stroke-dashoffset:238;
				
			}
		    to {
				stroke-dashoffset:0;
				
			}
		}
		</style>
	</head>
	<body>
		<svg width="84" height="84" class="circle__svg">
			<circle cx="41" cy="41" r="38" class="circle__progress--path01"></circle>
		</svg>
	</body>
</html>

　　

 

posted on 2022-03-18 16:25  caicai2015  阅读(122)  评论(0)    收藏  举报

导航