掘金Loading渐变效果, 数据加载等待时的, 渐变效果

在线预览效果 戳这里

<div class="box">
  <div class="row">div>
  <div class="row">div>
  <div class="row">div>
div>

<style>
@keyframes skeleton-stripes {
  0% { background-position: 0 0 }
  to { background-position: 480px 0 }
}

.box .row {
  margin-bottom: 16px;
  background: linear-gradient(90deg, #fff, #edeff1, #fff);
  background-size: 480px 480px;
  animation: skeleton-stripes .6s linear infinite
}

.box .row{
  width: 400px;
  height: 50px;
}

.box .row:nth-of-type(2),
.box .row:nth-of-type(3) {
  width: 80%
}
style>