Animated SVG Loader using GreenSock’s DrawSVG Plugin

Animated SVG Loader using GreenSock’s DrawSVG Plugin.markdown

Animated SVG Loader using GreenSock’s DrawSVG Plugin

Filler up doc. An SVG loader using the GreenSock DrawSVG plugin to help animate the path of the SVG.

Forked from Dennis Gaebel's Pen Filler Loader.

Forked from Dennis Gaebel's Pen Filler Loader.

A Pen by RyanParrish on CodePen.

License.

index.html

<svg version="1.1" viewBox="0 0 100 100" class="filler-loader">
  <circle class="fill-path" cx="50" cy="50" r="40"/>
</svg>

script.js

// Requires the GreenSock DrawSVG plugin and TimelineMax
var loader        = new TimelineMax({ repeat: -1 }),
    fill_path     = $('.fill-path'),
    fill_duration = 1.2,
    fill_position = '+=.25'; // place tween .25secs after end of init tween

loader.fromTo( fill_path, fill_duration, { drawSVG: '0' }, { drawSVG: '100%' }, fill_position )
      .to( fill_path, fill_duration, { drawSVG: '100% 100%' }, fill_position );

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.14.2/TweenMax.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/DrawSVGPlugin.js?r=11"></script>

style.css

@import "compass/css3";

// Demo Crap!!!!!! DONT USE!!!!!!
body{display:flex;justify-content:center;align-items:center;flex-direction: column;height:100vh;background:#1A89D4;}


// Filler Loader Styles !Required!
// =====================================================

$filler-loader: (
  size: 32px,
  stroke-width: 8px,
  stroke-color: white
);

.filler-loader {
  height: map-get($filler-loader, size);
  width: map-get($filler-loader, size);
  transform: rotate(-90deg);
  .fill-path {
    fill: none;
    stroke: map-get($filler-loader, stroke-color);
    stroke-linecap: butt;
    stroke-width: map-get($filler-loader, stroke-width);
  }
}