Tạo hiệu ứng loading theo phong cách của Window với CSS3

windows-phone-loading-animation-3fỞ blog của mình đã có 2 bài viết hướng dẫn tạo những hiệu ứng loading cực đẹp, nếu bạn không thích những hiệu ứng của 2 bài trước, thì ở bài này mình sẽ tiếp tục chia sẽ cho các bạn cách tạo loading theo phong cách của window. Chúng ta tạo ra loading đơn giản chỉ với các thuộc tính CSS3.

Các bạn có thể xem demo, để làm được như vậy, đầu tiên chúng ta vẫn cần xây dựng cấu trúc bằng HTML trước:

<span>Loading</span>
<span class="l-1"></span>
<span class="l-2"></span>
<span class="l-3"></span>
<span class="l-4"></span>
<span class="l-5"></span>
<span class="l-6"></span>

Chúng ta sẽ sử dụng thuộc tính animation của CSS3 để tạo ra hình ảnh cho hiệu ứng loading.

span[class*="l-"] {
 height: 4px; width: 4px;
 background: #000;
 display: inline-block;
 margin: 12px 2px;
 border-radius: 100%;
 -webkit-border-radius: 100%;
 -moz-border-radius: 100%;
 -webkit-animation: loader 4s infinite;
 -webkit-animation-timing-function: cubic-bezier(0.030, 0.615, 0.995, 0.415);
 -webkit-animation-fill-mode: both;
 -moz-animation: loader 4s infinite;
 -moz-animation-timing-function: cubic-bezier(0.030, 0.615, 0.995, 0.415);
 -moz-animation-fill-mode: both;
 -ms-animation: loader 4s infinite;
 -ms-animation-timing-function: cubic-bezier(0.030, 0.615, 0.995, 0.415);
 -ms-animation-fill-mode: both;
 animation: loader 4s infinite;
 animation-timing-function: cubic-bezier(0.030, 0.615, 0.995, 0.415);
 animation-fill-mode: both;
}

Tiếp theo là animation-delay để tạo ra sự chuyển động giữa các keyframe:

span.l-1 {-webkit-animation-delay: 1s;animation-delay: 1s;-ms-animation-delay: 1s;-moz-animation-delay: 1s;}
span.l-2 {-webkit-animation-delay: 0.8s;animation-delay: 0.8s;-ms-animation-delay: 0.8s;-moz-animation-delay: 0.8s;}
span.l-3 {-webkit-animation-delay: 0.6s;animation-delay: 0.6s;-ms-animation-delay: 0.6s;-moz-animation-delay: 0.6s;}
span.l-4 {-webkit-animation-delay: 0.4s;animation-delay: 0.4s;-ms-animation-delay: 0.4s;-moz-animation-delay: 0.4s;}
span.l-5 {-webkit-animation-delay: 0.2s;animation-delay: 0.2s;-ms-animation-delay: 0.2s;-moz-animation-delay: 0.2s;}
span.l-6 {-webkit-animation-delay: 0;animation-delay: 0;-ms-animation-delay: 0;-moz-animation-delay: 0;}

Cuối dùng đến keyframe:

kit-keyframes loader {
 0% {-webkit-transform: translateX(-30px); opacity: 0;}
 25% {opacity: 1;}
 50% {-webkit-transform: translateX(30px); opacity: 0;}
 100% {opacity: 0;}
}
 
@-moz-keyframes loader {
 0% {-moz-transform: translateX(-30px); opacity: 0;}
 25% {opacity: 1;}
 50% {-moz-transform: translateX(30px); opacity: 0;}
 100% {opacity: 0;}
}
 
@-keyframes loader {
 0% {-transform: translateX(-30px); opacity: 0;}
 25% {opacity: 1;}
 50% {-transform: translateX(30px); opacity: 0;}
 100% {opacity: 0;}
}
 
@-ms-keyframes loader {
 0% {-ms-transform: translateX(-30px); opacity: 0;}
 25% {opacity: 1;}
 50% {-ms-transform: translateX(30px); opacity: 0;}
 100% {opacity: 0;}

Như vậy, toàn bộ CSS mà chúng ta sử dụng bao gồm:

span {
 display: block;
 margin: 0 auto;
}
 
span[class*="l-"] {
 height: 4px; width: 4px;
 background: #000;
 display: inline-block;
 margin: 12px 2px;
 
 border-radius: 100%;
 -webkit-border-radius: 100%;
 -moz-border-radius: 100%;
 
 -webkit-animation: loader 4s infinite;
 -webkit-animation-timing-function: cubic-bezier(0.030, 0.615, 0.995, 0.415);
 -webkit-animation-fill-mode: both;
 -moz-animation: loader 4s infinite;
 -moz-animation-timing-function: cubic-bezier(0.030, 0.615, 0.995, 0.415);
 -moz-animation-fill-mode: both;
 -ms-animation: loader 4s infinite;
 -ms-animation-timing-function: cubic-bezier(0.030, 0.615, 0.995, 0.415);
 -ms-animation-fill-mode: both;
 animation: loader 4s infinite;
 animation-timing-function: cubic-bezier(0.030, 0.615, 0.995, 0.415);
 animation-fill-mode: both;
}
 
span.l-1 {-webkit-animation-delay: 1s;animation-delay: 1s;-ms-animation-delay: 1s;-moz-animation-delay: 1s;}
span.l-2 {-webkit-animation-delay: 0.8s;animation-delay: 0.8s;-ms-animation-delay: 0.8s;-moz-animation-delay: 0.8s;}
span.l-3 {-webkit-animation-delay: 0.6s;animation-delay: 0.6s;-ms-animation-delay: 0.6s;-moz-animation-delay: 0.6s;}
span.l-4 {-webkit-animation-delay: 0.4s;animation-delay: 0.4s;-ms-animation-delay: 0.4s;-moz-animation-delay: 0.4s;}
span.l-5 {-webkit-animation-delay: 0.2s;animation-delay: 0.2s;-ms-animation-delay: 0.2s;-moz-animation-delay: 0.2s;}
span.l-6 {-webkit-animation-delay: 0;animation-delay: 0;-ms-animation-delay: 0;-moz-animation-delay: 0;}
 
@-webkit-keyframes loader {
 0% {-webkit-transform: translateX(-30px); opacity: 0;}
 25% {opacity: 1;}
 50% {-webkit-transform: translateX(30px); opacity: 0;}
 100% {opacity: 0;}
}
 
@-moz-keyframes loader {
 0% {-moz-transform: translateX(-30px); opacity: 0;}
 25% {opacity: 1;}
 50% {-moz-transform: translateX(30px); opacity: 0;}
 100% {opacity: 0;}
}
 
@-keyframes loader {
 0% {-transform: translateX(-30px); opacity: 0;}
 25% {opacity: 1;}
 50% {-transform: translateX(30px); opacity: 0;}
 100% {opacity: 0;}
}
 
@-ms-keyframes loader {
 0% {-ms-transform: translateX(-30px); opacity: 0;}
 25% {opacity: 1;}
 50% {-ms-transform: translateX(30px); opacity: 0;}
 100% {opacity: 0;}

Như vậy, chúng ta đã tận dụng được thuộc tính animation trong css3 để tạo ra hiệu ứng loading giống với hiệu ứng loading của window phone mà không cần phải sử dụng 1 ảnh gif nào. Với hiệu ứng này, huy vọng bạn sẽ có một kết hợp thích hợp cho website của bạn, chúc các bạn thành công.

Đánh giá

Hãy bình luận, góp ý bằng Disqus để được hồi đáp nhanh hơn!
Sử dụng Facebook hoặc Google nếu không load được Disqus

Nhận nhiều thông tin bổ ích và quà tặng hấp dẫn
từ MELYWEB

Theo dõi blog MELYWEB để nhận được các tin tức bổ ích, khuyến mãi mới nhất, các quà tặng hấp dẫn.