<!-- this script is provided by https://www.htmlbestcodes.com coded by: Kerixa Inc. -->
                                                
                    
<style>
body {
 background-color: #EBF2F5;
 overflow: hidden;
 text-align: center;
}

body,
html {
 height: 100%;
 width: 100%;
 margin: 0;
 padding: 0;
}

#animationWindow {
 width: 100%;
 height: 100%;
}
</style>
<div id="animationWindow">
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/bodymovin/4.10.1/bodymovin.min.js'></script>
<script>
var select = function (s) {
  return document.querySelector(s);
},
selectAll = function (s) {
  return document.querySelectorAll(s);
},
animationWindow = select('#animationWindow'),
animData = {
  wrapper: animationWindow,
  animType: 'svg',
  loop: true,
  prerender: true,
  autoplay: true,
  path: 'https://www.htmlbestcodes.com/files/17-play_fill_loader.json',
  rendererSettings: {
    //context: canvasContext, // the canvas context
    //scaleMode: 'noScale',
    //clearCanvas: false,
    //progressiveLoad: false, // Boolean, only svg renderer, loads dom elements when needed. Might speed up initialization for large number of elements.
    //hideOnTransparent: true //Boolean, only svg renderer, hides elements when opacity reaches 0 (defaults to true)
  } },
anim;

anim = bodymovin.loadAnimation(animData);
anim.addEventListener('DOMLoaded', onDOMLoaded);
anim.setSpeed(1);

function onDOMLoaded(e) {
  anim.addEventListener('complete', function () {});
}
//ScrubBodymovinTimeline(anim);
</script>                                                                                   <a target='_blank' href='https://www.htmlbestcodes.com' style='font-size: 8pt; text-decoration: none'>Html Best Codes</a>