"css preloader"
Bootstrap 4.1.1 Snippet by ALIMUL AL RAZY

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 ----------> <body onload="loader()"> <div class="demo" id="Loading"> <div class="loader"> <div class="loader-inner"> <div class="box"></div> <div class="box"></div> </div> </div> </div> <h1>Hello World</h1> <div id="Loading"> <div class="box"></div> </div> </body>
.demo{ background: #0b6e71; } .loader{ width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; overflow: hidden; } .loader .loader-inner{ width: 10px; height: 10px; position: relative; } .loader .box{ width: 100%; height: 100%; border-radius: 50%; background: #ffdd04; position: absolute; -webkit-animation: loading-1 .8s linear infinite; animation: loading-1 .8s linear infinite; } .loader .box:nth-of-type(1){ left: 100%; -webkit-transform-origin: 80px bottom; transform-origin: 80px bottom; } .loader .box:nth-of-type(2){ right: 100%; -webkit-transform-origin: -80px top; transform-origin: -80px top; } @-webkit-keyframes loading-1{ 60%{ -webkit-transform: rotate(340deg); transform: rotate(340deg); } 100%{ -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes loading-1{ 60%{ -webkit-transform: rotate(340deg); transform: rotate(340deg); } 100%{ -webkit-transform: rotate(360deg); transform: rotate(360deg); } }
function loader(){ loader = setTimeout(showPage, 3600) } function showPage(){ document.getElementById("Loading").style.display = "none" }

Related: See More

Paper Kit 2

Questions / Comments: