CODEWITHSUNDEEP
htmlcsssvgcss-animations
Nikk
Nikk

Reputation: 7891

SVG Continuous Line Loader Animation

I have the following SVG line:

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>

However the animation ends up looking jagged.

Take a look at: jsFiddle

Upvotes: 1

Views: 445

Answers (1)

Ori Drori
Ori Drori

Reputation: 192006

You need each iteration to end in the same start position. This means that the offset should be 100%, and the dashes should be a percentage of the containers width:

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>

Upvotes: 1

Related Questions