JSFiddle - React, Tailwind, and code Playground
HTML
<div>
teting testin
</div>
<div class="overlay">
<div class="progress">
<img src="@Url.Content("~/content/images/loading.gif")" />Loading...
</div>
</div>
CSS
.overlay
{
position: fixed !important;
position: absolute; /*ie6*/
background-color: #000;
filter: alpha(opacity=20);
opacity: 0.2;
-moz-opacity: 0.2;
-khtml-opacity: 0.2;
-webkit-opacity: 0.2;
z-index: 10004;
display: none;
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=20); /*ie6*/
}
.overlay .progress
{
position: absolute;
z-index: 10005;
background: #fff;
color: #000;
}
JavaScript
$('.overlay').css({ height: $(document).height(), width: $(document).width() }).show();
$(".progress").css({ top: $(window).height() / 2, left: $(window).width() / 2 });