"Preloader"
Bootstrap 4.1.1 Snippet by hardiktrivedi

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.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;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
function loader(){
loader = setTimeout(showPage, 3000)
}
function showPage(){
document.getElementById("Loading").style.display = "none"
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Paper Bootstrap Wizard

Questions / Comments: