时间戳

首页 > 解决方案 > SVG 连续线加载器动画

html - SVG 连续线加载器动画

问题描述

我有以下 SVG 行：

svg#line_loader {
	position: relative; float: left; clear: none; display: block;
	width: 100%; height: 8px; margin: 0; padding: 0;
	stroke: rgb(255, 205, 0);
	
	stroke-width: 10; stroke-linecap: round;

	stroke-dasharray: 100;
	stroke-dashoffset: 0;
	
	animation: dash 1s linear forwards infinite;
}

@keyframes dash {
  0%   { stroke-dashoffset: 0; }
  100%   { stroke-dashoffset: 100; }
}
<svg id="line_loader"><line x1="100%" y1="0%" x2="0%" y2="0%"></line></svg>

然而，动画最终看起来参差不齐。

看看：jsFiddle

标签： htmlcsssvgcss-animations

解决方案

您需要每次迭代都以相同的起始位置结束。这意味着偏移量应该是100%，并且破折号应该是容器宽度的百分比：

svg#line_loader {
	position: relative; clear: none; display: block;
	width: 100%; height: 8px; margin: 0; padding: 0;
	stroke: rgb(255, 205, 0);
	
	stroke-width: 10; stroke-linecap: round;

	stroke-dasharray: 25%;
	
	 animation: dash 1s linear forwards infinite;
}

@keyframes dash {
  0%   { stroke-dashoffset: 0; }
  100%   { stroke-dashoffset: 100%; }
}
<svg id="line_loader"><line x1="100%" y1="0%" x2="0%" y2="0%"></line></svg>

推荐阅读