JSFiddle - React, Tailwind, and code Playground
HTML
<div id="bg_loader" style="background-image:url(http://www.myhhf.com/images/loading/myhhub_loading_4.gif);"></div>
CSS
html{
height: 100%;
min-height: 100%;
overflow-y: scroll;
}
body{
width: 100%;
height: 100%;
min-height: 100%;
overflow: hidden;
background-color: #F1FAFC;
background-attachment: fixed;
font-size: 80%;
margin: 0;
}
#bg_loader {
width: 100%;
height: 100%;
z-index: 100000000;
background-image: url(../images/loading/myhhub_loading.gif);
background-repeat: no-repeat;
background-position: center;
}
#bg_loader:before {
content: "";
display: inline-block;
height: 100%;
vertical-align: middle;
}
#bg_loader:after {
content: "Thank You for Waiting";
display: inline-block;
vertical-align: middle;
width: 100%;
height: 13.86em;
line-height: calc(100% + (13.86em * 2) + 1.575em);
text-align: center;
font-size: 140%;
font-weight: bold;
color: #080;
}