<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>loading page</title>
<style>
/**************************/
/*
Pop up Layer
*/
/******background part*********/
.pop_up_bg {
width: 100%;
height: 100%;
position: fixed;
background: #000;
left: 0;
top: 0;
z-index: 10;
opacity: .5;
}
/********loading information************/
#loading_info{
display: block;
}
.loading_content {
position: fixed;
top:45%;
left:45%;
width: 10%;
z-index: 30;
}
.loading_content div img{
width: 100%;
position: absolute;
z-index: 40;
}
</style>
</head>
<body>
<!--loading infor pop up-->
<div class="pop_up" id="loading_info">
<div class="pop_up_bg"></div>
<div class="loading_content">
<div><img src="loading.gif"></div>
</div>
</div>
<!---------------------->
</body>
</html>
![](https://images2015.cnblogs.com/blog/786369/201601/786369-20160113152341928-843027416.gif)