"Preloader"
Bootstrap 4.1.1 Snippet by hardiktrivedi

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <body onload="loader()"> <div class="demo" id="Loading"> <div class="loader"> <div class="tenor-gif-embed" data-postid="23310815" data-share-method="host" data-aspect-ratio="1.77778" data-width="100%"><a href="https://tenor.com/view/runseum-bearseum-bullseum-bull-bear-gif-23310815">Runseum Bearseum GIF</a>from <a href="https://tenor.com/search/runseum-gifs">Runseum GIFs</a></div> <script type="text/javascript" async src="https://tenor.com/embed.js"></script> </div> </div> <h1>Hello World</h1> <p>Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum</p> <div id="Loading"> </div> </body>
.loader{ width: 100%; height: 100%; display:flex; align-items: center; justify-content: center; overflow: hidden; } .loader .box{ width: 100%; height: 100%; position: absolute; -webkit-animation: loading-1 .8s linear infinite; animation: loading-1 .8s linear infinite; }
function loader(){ loader = setTimeout(showPage, 3000) } function showPage(){ document.getElementById("Loading").style.display = "none" }

Related: See More

Vue Material Kit

Questions / Comments: