CSS3 Keyframe Animation: Как показать анимацию ключевых кадров для загрузки табличных данных - PullRequest
Новая
       8

CSS3 Keyframe Animation: Как показать анимацию ключевых кадров для загрузки табличных данных

0 голосов
/ 26 августа 2018

У меня есть страница, где я показываю основные и подробные данные.подробные данные отображаются в виде таблицы HTML.при загрузке страницы я получаю данные с помощью ajax и заполняю пользовательский интерфейс.

, поэтому я планирую создать анимацию с помощью ключевого кадра 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 fiddle, потому что другие люди могут понять, какую анимацию я ищу для пользовательского интерфейса моей страницы.

, как я уже сказал, у меня есть основные данные и подробные данные.Теперь скажите мне, как я могу применить вышеупомянутую анимацию для моих основных данных и данных.подробные данные будут показаны в виде таблицы html.дай пример кода.

...