下面的例子实现如何将加载动画放置在页面中间，当加载完毕时，展示页面内容。 - 在线编辑器

          <html>
<head>
  <style>
    /* 使加载动画在页面居中 */

    .loader {
      position: absolute;
      left: 50%;
      top: 50%;
      z-index: 1;
      width: 150px;
      height: 150px;
      margin: -75px 0 0 -75px;
      border: 16px solid #f3f3f3;
      border-radius: 50%;
      border-top: 16px solid #5cb85c;
      width: 120px;
      height: 120px;
      -webkit-animation: spin 2s linear infinite;
      animation: spin 2s linear infinite;
    }

    @-webkit-keyframes spin {
      0% {
        -webkit-transform: rotate(0deg);
      }
      100% {
        -webkit-transform: rotate(360deg);
      }
    }

    @keyframes spin {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }

    .page-content {
      display: none;
      text-align: center;
    }
    /* 为"页面内容"增加动画 */

    .animate-bottom {
      position: relative;
      -webkit-animation-name: animate-bottom;
      -webkit-animation-duration: 1s;
      animation-name: animate-bottom;
      animation-duration: 1s
    }

    @-webkit-keyframes animate-bottom {
      from {
        bottom: -100px;
        opacity: 0
      }
      to {
        bottom: 0px;
        opacity: 1
      }
    }

    @keyframes animate-bottom {
      from {
        bottom: -100px;
        opacity: 0
      }
      to {
        bottom: 0;
        opacity: 1
      }
    }
  </style>
  <script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
</head>
<body>

  <div class="js-loader loader"></div>

  <div class="js-page-content page-content animate-bottom">
    <h2>加载完成!</h2>
    <p>页面上增加了一些新的内容...</p>
    <a href="/examples/how-to-css-loader5/result.html">重新加载</a>
  </div>

  <script>
    $(function() {
      setTimeout(showPage, 3000);

      function showPage() {
        $('.js-loader').hide();
        $('.js-page-content').show();
      }
    });
  </script>

</body>
</html>
        