Html Code: Video Loading Effect

If you develop an app or website which loads a video, you should put a loading effect on it which shows the progress of loading as well. Following is a beautiful example of such snippets!

<!-- this script got from 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/uploads/other/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='http://www.htmlbestcodes.com/' style='font-size: 8pt; text-decoration: none'>HTML Codes</a>

If you don't know how to use this code or need more information Click here!

Html Best Codes

Html Code: Video Loading Effect

Review

Links