Hiệu ứng animate đẹp khi tải thêm bài viết

Nếu bạn đã đọc các trang báo mạng như soha, ttvn, kenh14…, khi bạn kéo thanh cuộn xuống dưới chân trang sẽ tự động tải thêm các bài viết tiếp theo, nhưng trước khi hiển thị các bài viết sẽ xuất hiện một hiệu ứng animate khá là đẹp trông nó như demo dưới đây:

Nếu bạn cũng muốn áp dụng hiệu ứng này thì tham khảo cách làm như sau:

Code HTML

Copy


<div class="fblwti-animated">

  <div class="fblwtia-mask fblwtia-title-line fblwtia-title-mask-0"></div>

  <div class="fblwtia-mask fblwtia-sepline-sapo fblwtia-sapo-line-0"></div>

  <div class="fblwtia-mask fblwtia-sepline-sapo fblwtia-sepline-sapo-0"></div>

  <div class="fblwtia-mask fblwtia-title-line fblwtia-title-mask-1"></div>

  <div class="fblwtia-mask fblwtia-sepline-sapo fblwtia-sapo-line-1"></div>

  <div class="fblwtia-mask fblwtia-sepline-sapo fblwtia-sepline-sapo-1"></div>

  <div class="fblwtia-mask fblwtia-front-mask fblwtia-front-mask-2"></div>

  <div class="fblwtia-mask fblwtia-sapo-line fblwtia-sapo-line-2"></div>

  <div class="fblwtia-mask fblwtia-sepline-sapo fblwtia-sepline-sapo-2"></div>

  <div class="fblwtia-mask fblwtia-front-mask fblwtia-front-mask-3"></div>

  <div class="fblwtia-mask fblwtia-sapo-line fblwtia-sapo-line-3"></div>

  <div class="fblwtia-mask fblwtia-sepline-sapo fblwtia-sepline-sapo-3"></div>

  <div class="fblwtia-mask fblwtia-front-mask fblwtia-front-mask-4"></div>

  <div class="fblwtia-mask fblwtia-sapo-line fblwtia-sapo-line-4"></div>

  <div class="fblwtia-mask fblwtia-sepline-sapo fblwtia-sepline-sapo-4"></div>

</div>

Code CSS

Copy



.fblwtia-mask {

  background:#fff;

  position:absolute;

  -webkit-box-sizing:border-box;

  -moz-box-sizing:border-box;

  box-sizing:border-box;

  height:10px;

}

.fblwtia-title-line {

  right:0;

  left:36%;

  top:0;

  height:20px;

  width:3%;

}

.fblwtia-front-mask {

  height:10px;

  left:36%;

  width:3%;

}

.fblwtia-title-mask-1 {

  top:30px;

}

.fblwtia-front-mask-2 {

  top:70px;

  height:15px;

}

.fblwtia-front-mask-3 {

  top:105px;

}

.fblwtia-front-mask-4 {

  top:125px;

}

.fblwtia-sepline-sapo {

  left:36%;

  right:0;

}

.fblwtia-sepline-sapo-0 {

  top:20px;

}

.fblwtia-sepline-sapo-1 {

  top:50px;

  height:20px;

}

.fblwtia-sepline-sapo-2 {

  top:85px;

  height:20px;

}

.fblwtia-sepline-sapo-3 {

  top:115px;

}

.fblwtia-sepline-sapo-4 {

  top:135px;

  height:50px;

}

.fblwtia-sapo-line {

  right:0;

}

.fblwtia-sapo-line-2 {

  top:70px;

  left:55%;

  height:15px;

}

.fblwtia-sapo-line-3 {

  top:105px;

  left:95%;

}

.fblwtia-sapo-line-4 {

  top:125px;

  left:85%;

  height:10px;

}

.fblwti-animated {

  animation-duration:1.5s;

  animation-fill-mode:forwards;

  animation-iteration-count:infinite;

  animation-name:placeHolderShimmer;

  animation-timing-function:linear;

  background:#f6f7f8;

  background:linear-gradient(to right,#eee 8%,#ddd 18%,#eee 33%);

  background-size:800px 200px;

  height:185px;

  position:relative;

}

@-webkit-keyframes placeHolderShimmer {

  0% {

    background-position:-800px 0;

  }

  100% {

    background-position:800px 0;

  }

}

.fblwtia-sapo-line-0 {

  top:0;

  left:98%;

  height:20px;

}

.fblwtia-sapo-line-1 {

  top:30px;

  left:85%;

  height:20px;

}