【特效库】svg进度条/过渡条

最新推荐文章于 2024-09-12 15:05:37 发布

银贝斯

最新推荐文章于 2024-09-12 15:05:37 发布

阅读量1.6k

点赞数

文章标签：过渡条 svg gradient

本文链接：https://blog.csdn.net/yhn1121/article/details/72818558

版权

数据可视化专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<svg id="js-times-svg" >
		  <defs>
		    <linearGradient id="color-gradient" x1="0" y1="0%" x2="99.33%" y2="0%" gradientUnits="userSpaceOnUse">
		      <stop offset="0%" style="stop-color:#62B220"></stop>
		      <stop offset="100%" style="stop-color:#f6250a"></stop>
		    </linearGradient>
		  </defs>
		  <line x1="0" y1="50" x2="100%" y2="50.001" stroke="#666" stroke-width="30" stroke-dasharray="5 5"></line>
		  <line id = "colorful" x1="0" y1="50" x2="99.33%" y2="50.001" stroke="url(#color-gradient)" stroke-width="30" stroke-dasharray="5 5" style="transition:all .5s ease;" class="prog"></line>

		</svg>
		<script type="text/javascript">
			var i = 0;
			var flag = 1;
			setInterval(function(){
				console.log(document.querySelector("#colorful").setAttribute("x2",i+"%"));
				if(flag==1){
					if(i==100){
						flag = 0;
					}
					i++;
				}else{
					if(i==0){
						flag = 1;
					}
					i--;
				}

				
			},50)
		</script>
	</body>
</html>