How To Make Beautiful Loader Using Javascript?

Loader Using Javascript can make your website starting part more extra ordinary.

JS Loader Code :

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <script src='https://cdnjs.cloudflare.com/ajax/libs/bodymovin/4.8.0/bodymovin.min.js'></script><script  src="./script.js"></script>
   <title></title>

<style>
   body {
    background-color: #FDC800;
    overflow: hidden;
    text-align: center;
   }

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

   #animationWindow {
    width: 100%;
    height: 100%;
   }
</style>

</head>
<body>

<div id="animationWindow"></div>

<script>
	var animData = {
		wrapper: document.querySelector('#animationWindow'),
		animType: 'svg',
		loop: true,
		prerender: true,
		autoplay: true,
		path: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/35984/LEGO_loader.json'
	};
	var anim = bodymovin.loadAnimation(animData);
   anim.setSpeed(3.4);

</script>
</body>
</html>

Recent Posts

Leave a Reply

Your email address will not be published. Required fields are marked *