2 lines
1.1 KiB
XML
2 lines
1.1 KiB
XML
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="Loading" viewBox="0 0 342 100" width="342" height="100"><g id="dots"><circle class="dot" cx="122.45" cy="35.4" r="13" fill="#f89406"/><circle class="dot" cx="151.35" cy="35.4" r="13" fill="#b94a48"/><circle class="dot" cx="180.25" cy="35.4" r="13" fill="#3a87ad"/><circle class="dot" cx="209.15" cy="35.4" r="13" fill="#468847"/></g><text x="50%" y="50%" dy="1.5em" text-anchor="middle" font-size="1.5em" font-family="sans-serif">Loading...</text><script xlink:href="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/TweenMax.min.js"/><script type="text/ecmascript"><![CDATA[var dots = document.querySelectorAll('.dot'),tl = new TimelineMax({repeat: -1});
|
||
|
|
function getDotsWaveTl(){var dotsWaveTl = new TimelineMax();[].forEach.call(dots, function(element, index){var dotWaveTl = new TimelineMax(),delay = 0.15;dotWaveTl.to(element, 0.4, {y: -7, ease:Power1.easeOut}).to(element, 0.8, {y: 7, ease:Power1.easeInOut}).to(element, 0.4, {y: 0, ease:Power1.easeIn});dotsWaveTl.add(dotWaveTl, delay*index);});return dotsWaveTl;}tl.add(getDotsWaveTl());]]></script></svg>
|