<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 {
  background-color: #222;
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  // animation-name: closeLoading;
  // animation-duration: 3s;
  animation: closeLoading 3s 1 ease-out forwards;
  .ball-spin-fade-loader {
    position: absolute;
    top: 50%;
    left: 50%;
  }
  @keyframes closeLoading {
    0% {
      opacity: 1;
    }
    50% {
      opacity: 0.5;
    }
    100% {
      opacity: 0;
    }
  }
}

.wrap {
  width: 960px;
  margin: 0 auto;
  .box {
    margin: 10% auto 0 auto;
    width: 300px;
    background-color: $yellow;
    padding: 10px 20px;
    border-radius: 10px;
    box-shadow: 0 0 5px 3px rgba($color: $text, $alpha: 0.3);
    opacity: 0;
    // animation-name: openBox;
    // animation-duration: 3s;
    animation: openBox 3s 2s 1 linear forwards;
    h1 {
      font-size: 32px;
      color: $primary;
      padding: 10px 0;
    }
    p {
      color: $text;
      font-size: 16px;
      line-height: 1.5;
    }
  }

  @keyframes openBox {
    0% {
      opacity: 0;
    }
    50% {
      opacity: 0.5;
    }
    100% {
      opacity: 1;
    }
  }
}