Một vài hiệu ứng loading animation css tải thêm thường được sử dụng

Giới thiệu đế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.

Đọc thêm: Cách thêm hiệu ứng tooltip khi hover vào button

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

+ Sử dụng class="loading"

HTML

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

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>

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)}}

Đọc thêm: Tuyển chọn một số nút gọi điện đẹp sử dụng hiệu ứng animation css

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>

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)}}

Đọc thêm: Tạo thanh cố định bên trái trong bài viết giống zing chỉ hiển thị trên máy tính

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

HTML

<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>

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}}

Đọc thêm: Code CSS tham khảo về Grid Layout

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

Bài cùng chuyên mục

Bài cùng tác giả