CSS3关键帧动画：如何显示用于表格数据加载的关键帧动画

Question

我有一个页面，其中显示了主数据和详细数据。 html表显示的详细数据。页面加载时，我将通过ajax获取数据并填充UI。

所以我的计划是我想通过CSS3关键帧制作某种动画，如下所示。

body {
  margin: 90px auto;
  width: 500px;
  background-color: #e9eaed;
}

.animationLoading {
  background: #fff;
  border: 1px solid;
  border-color: #e5e6e9;
  border-radius: 3px;
  display: block;
  height: 324px;
  width: 494px;
  padding: 12px;
}

@keyframes animate {
  0% {
    background-position: -468px 0
  }
  100% {
    background-position: 468px 0
  }
}

#container {
  width: 100%;
  height: 30px;
}

#one,
#two,
#three,
#four,
#five,
#six {
  position: relative;
  background-color: #CCC;
  height: 6px;
  animation-name: animate;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  background: -webkit-gradient(linear, left top, right top, color-stop(8%, #eeeeee), color-stop(18%, #dddddd), color-stop(33%, #eeeeee));
  background: -webkit-linear-gradient(left, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
  background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
  -webkit-background-size: 800px 104px;
}

#one {
  left: 0;
  height: 40px;
  width: 40px;
}

#two {
  left: 50px;
  top: -33px;
  width: 25%;
}

#Three {
  left: 50px;
  top: -20px;
  width: 15%;
}

#four {
  left: 0px;
  top: 30px;
  width: 80%;
}

#five {
  left: 0px;
  top: 45px;
  width: 90%;
}

#six {
  left: 0px;
  top: 60px;
  width: 50%;
}

<div class="animationLoading">
  <div id="container">
    <div id="one"></div>
    <div id="two"></div>
    <div id="three"></div>
  </div>
  <div id="four"></div>
  <div id="five"></div>
  <div id="six"></div>
</div>

当数据加载完成后，动画将消失并显示数据。看到我上面的动画。

我在这里附加js小提琴链接，因为其他人可以理解我正在寻找页面UI的动画。

正如我所说，我有主数据和详细数据。现在告诉我如何将以上动画应用于主数据和详细数据。详细数据将通过html表显示。给我一个代码示例。