Video Loading Effect

Written by @kerixa 24 May 2020

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!

Code Snippet:

                                                
                                                <!-- 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>                                                
                                            

Example:


About @kerixa

I am Krishna Eydat. I studied Software Engineering at University of Waterloo in Canada. I lead a few tech companies. I am passionate about the way we are connected. I would like to be part of something big or be the big deal!

K

Comments


Here you can leave us commments. Let us know what you think about this code tutorial!

0 / 300

TRENDING POST
1
2
3
4
5
VISITORS
Online Users: 12
Recent Members: sahjahan, fk khan, Proper, Jenisha, Mr Joseph Charles
advertisement 2