Example of a Loading Animation on an SVG Stroke

Basic-Example-of-SVG-Line-Drawing,-Backward-and-Forward.markdown

Example of a Loading Animation on an SVG Stroke

See the Pen Example of a Loading Animation on an SVG Stroke by Russ Gossett (@russgossett) on CodePen.

<script async src="//assets.codepen.io/assets/embed/ei.js"></script>

Inspired by... A Pen by Chris Coyier on CodePen.

License.

index.html

<svg width="80" height="80" xmlns="http://www.w3.org/2000/svg">
 <!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
 <g>
  <title>Loading Animation</title>
  <g id="play-btn">
   <circle class="loading" fill="gray" stroke="blue" stroke-width="7" cx="40" cy="40" r="35.77378" />
   <path fill="white"  d="m27.25959,22.04761l0,35.9922l31.27191,-17.70108l-31.27191,-18.29111z" />
  </g>
 </g>
</svg>

style.css

.loading {
  stroke-dasharray: 500;
  stroke-dashoffset: 0;
  animation: load 5s linear infinite;
}
@keyframes load {
  from {stroke-dashoffset: 500;}
  to {stroke-dashoffset: -1000;}
}