pop up layer loading

<!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://www.cnblogs.com/xiayedexin/p/5127416.html