<div class="loading">
  <div class="loader-inner ball-spin-fade-loader"></div>
 </div>

 <div class="wrap">
  <div class="box">
    <h1>This is Title</h1>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Fuga autem iste est blanditiis doloribus cumque
      beatae vero labore perspiciatis adipisci, ratione voluptas ullam reiciendis culpa. Consequuntur cumque corporis
      dolorum perspiciatis.</p>
  </div>
 </div>

$primary: #3d82ad;
$white: #fff;
$text: #333;
$blue: #5fbfff;
$green: #00aa00;
$yellow: #f3da9a;
$orange: #ff8800;
$pink: #faaad1;
$red: #fa5858;
$darkRed: #a11313;

//layout
body {
  box-sizing: border-box;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif, "微軟正黑體";
}

.loading {
  min-height: 100vh;
  text-align: center;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2;
  background: #222;
  color: #fff;
}
.wrap {
  margin: 0 auto;
  width: 500px;
  .box {
    margin-top: 10%;
    width: 300px;
    padding: 20px;
    border-radius: 10px;
    z-index: 1;
    line-height: 2;
    background: rgba($yellow, 0.6);
    display: none;
    h1 {
      color: $primary;
      font-size: 24px;
    }
    p {
      color: $text;
      font-size: 16px;
    }
  }
}

$(function () {
  //loader 的淡出時間
  $(".loader-inner").loaders();
  setTimeout(function () {
    $(".loading").fadeOut(600);
  }, 1600);

  //box 的淡入時間
  setTimeout(function () {
    $(".box").fadeIn(800);
  }, 2000);
});