Chia sẻ hiệu ứng loading animation css tải thêm hay được sử dụng

Loading...

Đăng ký nhận thông báo email từ FeedBurner

Nhận thông báo ngay qua email từ FeedBurner để không bỏ lỡ bài đăng mới nào từ Blog

Email nhận thông báo *

*Vui lòng kiểm tra hộp thư đến của bạn để biết thông báo xác minh từ FeedBurner. Nếu bạn không thấy email xác nhận, vui lòng kiểm tra thư mục thư rác.

Xin chào các bạn, hôm nay mình xin chia sẻ đến bạn đọc một vài hiệu ứng loading animation css khi chờ trong một khoảng thời gian ngắn để tải thêm bài viết. Các hiệu ứng loading này thường được các trang web sử dụng nhiều nhất từ hiệu ứng đơn giản đến phức tạp.

1. Hiệu ứng loading đơn giản

+ Sử dụng class="loading"

HTML<div class="loading"></div>

Demo:

CSS

.loading{position:relative;min-height:64px}
.loading:before{position:absolute;z-index:99;pointer-events:none;top:calc(50% - 15px);left:calc(50% - 15px);content:'';border-top:2px solid rgba(0,0,0,0.1)!important;border-right:2px solid rgba(0,0,0,0.1)!important;border-bottom:2px solid rgba(0,0,0,0.1)!important;opacity:.8;border-left:2px solid #fff;animation:spin .6s infinite linear;border-radius:50%;width:30px;height:30px}
@-webkit-keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}

+ Sử dụng class="spinner"

HTML

<div class="spinner"></div>

Demo:

CSS

.spinner{position:relative;min-height:64px}
.spinner:before{content:'';box-sizing:border-box;position:absolute;top:calc(50% - 15px);left:calc(50% - 15px);width:34px;height:34px;border-radius:50%;border:2px solid #999;border-right-color:transparent;animation:spinner .9s linear infinite;-webkit-animation:spinner .9s ease-in-out infinite}
@-webkit-keyframes spinner{to{-webkit-transform:rotate(360deg)}}
@keyframes spinner{to{transform:rotate(360deg)}}

2. Hiệu ứng loading giống zing.vn

HTML

<div class="btnMore"><div class="ellipsis"><div></div><div></div><div></div><div></div></div></div>

Demo:

CSS

.btnMore{float:left;width:100%;text-align:center;line-height:40px;letter-spacing:1px}
.ellipsis{position:relative;width:64px;height:64px;margin:0 auto}
.ellipsis div{position:absolute;top:27px;width:11px;height:11px;border-radius:50%;background:#0098d3;-webkit-animation-timing-function:cubic-bezier(0,1,1,0);animation-timing-function:cubic-bezier(0,1,1,0)}
.ellipsis div:nth-child(1){left:6px;-webkit-animation:lds-ellipsis1 0.6s infinite;animation:lds-ellipsis1 0.6s infinite}
.ellipsis div:nth-child(2){left:6px;-webkit-animation:lds-ellipsis2 0.6s infinite;animation:lds-ellipsis2 0.6s infinite}
.ellipsis div:nth-child(3){left:26px;-webkit-animation:lds-ellipsis2 0.6s infinite;animation:lds-ellipsis2 0.6s infinite}
.ellipsis div:nth-child(4){left:45px;-webkit-animation:lds-ellipsis3 0.6s infinite;animation:lds-ellipsis3 0.6s infinite}
@-webkit-keyframes lds-ellipsis1{0%{-webkit-transform:scale(0);transform:scale(0)}100%{-webkit-transform:scale(1);transform:scale(1)}}
@keyframes lds-ellipsis1{0%{-webkit-transform:scale(0);transform:scale(0)}100%{-webkit-transform:scale(1);transform:scale(1)}}
@-webkit-key lds-ellipsis2{100%{-webkit-transform:translate(19px,0);transform:translate(19px,0)}}
@keyframes lds-ellipsis2{100%{-webkit-transform:translate(19px,0);transform:translate(19px,0)}}

@-webkit-keyframes lds-ellipsis3{0%{-webkit-transform:scale(1);transform:scale(1)}100%{-webkit-transform:scale(0);transform:scale(0)}}
@keyframes lds-ellipsis3{0%{-webkit-transform:scale(1);transform:scale(1)}100%{-webkit-transform:scale(0);transform:scale(0)}}

3. Hiệu ứng loading giống các trang kenh14, soha, afamily

<div class="fb-loading-wrapper">
  <div class="fblw-timeline-item">
    <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>
  </div>
</div>

Demo:

CSS

.fb-loading-wrapper{float:left;width:100%;position:relative;overflow:hidden}
.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:150px;position:relative}
@-webkit-keyframes placeHolderShimmer{0%{background-position:-800px 0}100%{background-position:800px 0}}
@keyframes placeHolderShimmer{0%{background-position:-800px 0}100%{background-position:800px 0}}

Bạn đọc tham khảo thêm nhiều hiệu ứng loading animation css khác tại trang web loading.io

Created by Voz Blogger