"preloader"
Bootstrap 4.0.0 Snippet by Shakibur22

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="wrapper"> <div class="up"></div> <div class="loading"></div> <div class="down"></div> </div>
body, html { height: 100%; width: 100%; padding: 0; margin: 0; overflow: hidden; } .wrapper { width: 100%; height: 100%; } .loading { margin: 10% auto; border-top: 6px solid #1abc9c; width: 125px; position: absolute; margin: 0 auto; left: 0; right: 0; top: 50%; z-index: 9999; } .spin { -webkit-animation: spin 1s infinite linear; -moz-animation: spin 2s infinite linear; -ms-animation: spin 2s infinite linear; -o-animation: spin 2s infinite linear; animation: spin 1s infinite linear; } @keyframes "spin" { from { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } } @-moz-keyframes spin { from { -moz-transform: rotate(0deg); transform: rotate(0deg); } to { -moz-transform: rotate(360deg); transform: rotate(360deg); } } @-webkit-keyframes "spin" { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @-ms-keyframes "spin" { from { -ms-transform: rotate(0deg); transform: rotate(0deg); } to { -ms-transform: rotate(360deg); transform: rotate(3670deg); } } @-o-keyframes "spin" { from { -o-transform: rotate(0deg); transform: rotate(0deg); } to { -o-transform: rotate(360deg); transform: rotate(360deg); } } .class { -webkit-animation: none; -moz-animation: none; -o-animation: none; animation: none; } .up { background-color: #34495e; width: 100%; height: 50%; position: absolute; top: 0; } .down { background-color: #34495e; width: 100%; height: 50%; position: absolute; bottom: 0; } .left-text-con, .right-text-con { position: absolute; width: 50%; height: auto; top: 35%; } .left-text-con { left: -50%; text-align: right; margin-right: 10px; } .right-text-con { right: -50%; } .text { color: #34495e; font-size: 4em; margin: 0 auto; } @media (max-height: 300px) { .text { font-size: 3em; } .left-text-con, .right-text-con { top: 20%; } } .anchor-user { font-size: 3em; position: relative; bottom: 0; right: 20px; color: #000; } .anchor-user:hover { color: #039be5;; -webkit-transition: color .5s ease; -moz-transition: color .5s ease; -ms-transition: color .5s ease; -o-transition: color .5s ease; transition: color .5s ease; }
$(window).load(function() { $(".loading").addClass("spin"); setTimeout(function() { var currentPositon = $(".loading").css("transform"); console.log(currentPositon) $(".loading").addClass("class").css("transform", currentPositon).css("transform", "none") $(".loading").animate({ }, 500, function() { increaseWidth(); }); }, 1985); function increaseWidth() { $(".loading").animate({ width: "+=100%", }, 2500, function() { slide(); removeLine(); moveTextRight(); moveTextLeft(); }); } function removeLine() { $(".loading").animate({ width: "0%", }, 2500, function() {}); } function goUp() { $(".up").show(); $(".up").animate({ top: "-=50%" }, 2500, function() { $(this).hide(); }); } function goDown() { $(".down").show(); $(".down").animate({ bottom: "-=50%" }, 2500, function() { $(this).hide(); }); } function slide() { goUp(); goDown(); } });

Related: See More


Questions / Comments: