Tạo hiệu ứng loading bằng CSS3

Trong bài viết này mình sẽ hướng dẫn các bạn cách tạo ra hiệu ứng loading trong trang mà không sử dụng bất kỳ hình động nào. Mình nghĩ nó sẽ thật sự gây ấn tượng cho bạn trong việc giảm số lượng hình ảnh trong các trang web hoặc blog của bạn. Để có thêm nhiều sự lựa chọn,mình sẽ giới thiệu với các bạn 3 hiệu ứng loading khác nhau(xem demo tại đây). Các bạn  làm theo từng bước nha.
Bước 1 : HTML
trong bước này chúng ta sẽ tạo ra 3 phần tử chứa 3 hiệu ứng loading khác nhau

<div class="main_body">
    <div class="element">
        <div class="loading1">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>
    <div class="element">
        <div class="loading2">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>
    <div class="element">
        <div class="loading3">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>
</div>

Bước 2 : CSS
Đây là bước hấp dẫn nhất, mình sẽ giới thiệu cho các bạn từng hiệu ứng loading bằng cách áp dụng css cho từng phần tử, đầu tiên chúng ta sẽ tìm hiểu đoạn css cho cái đầu tiên

.loading1 {
height:100px;
position:relative;
awidth:80px;
}
.loading1 > div {
background-color:#FFFFFF;
height:30px;
position:absolute;
awidth:12px;

/* css3 radius */
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;

/* css3 transform - scale */
-webkit-transform:scale(0.4);
-moz-transform:scale(0.4);
-o-transform:scale(0.4);

/* css3 animation */
-webkit-animation-name:loading1;
-webkit-animation-duration:1.04s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:linear;
-moz-animation-name:loading1;
-moz-animation-duration:1.04s;
-moz-animation-iteration-count:infinite;
-moz-animation-direction:linear;
-o-animation-name:loading1;
-o-animation-duration:1.04s;
-o-animation-iteration-count:infinite;
-o-animation-direction:linear;
}
.loading1 > div:nth-child(1) {
left:0;
top:36px;

/* css3 transform - rotate */
-webkit-transform:rotate(-90deg);
-moz-transform:rotate(-90deg);
-o-transform:rotate(-90deg);

/* css3 animation */
-webkit-animation-delay:0.39s;
-moz-animation-delay:0.39s;
-o-animation-delay:0.39s;
}

.loading1 > div:nth-child(2) {
left:10px;
top:13px;

/* css3 transform - rotate */
-webkit-transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
-o-transform:rotate(-45deg);

/* css3 animation */
-webkit-animation-delay:0.52s;
-moz-animation-delay:0.52s;
-o-animation-delay:0.52s;
}

.loading1 > div:nth-child(3) {
left:34px;
top:4px;

/* css3 transform - rotate */
-webkit-transform:rotate(0deg);
-moz-transform:rotate(0deg);
-o-transform:rotate(0deg);

/* css3 animation */
-webkit-animation-delay:0.65s;
-moz-animation-delay:0.65s;
-o-animation-delay:0.65s;
}

.loading1 > div:nth-child(4) {
right:10px;
top:13px;

/* css3 transform - rotate */
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-o-transform:rotate(45deg);

/* css3 animation */
-webkit-animation-delay:0.78s;
-moz-animation-delay:0.78s;
-o-animation-delay:0.78s;
}
.loading1 > div:nth-child(5) {
right:0;
top:36px;

/* css3 transform - rotate */
-webkit-transform:rotate(90deg);
-moz-transform:rotate(90deg);
-o-transform:rotate(90deg);

/* css3 animation */
-webkit-animation-delay:0.91s;
-moz-animation-delay:0.91s;
-o-animation-delay:0.91s;
}
.loading1 > div:nth-child(6) {
right:10px;
bottom:9px;

/* css3 transform - rotate */
-webkit-transform:rotate(135deg);
-moz-transform:rotate(135deg);
-o-transform:rotate(135deg);

/* css3 animation */
-webkit-animation-delay:1.04s;
-moz-animation-delay:1.04s;
-o-animation-delay:1.04s;
}
.loading1 > div:nth-child(7) {
bottom:0;
left:34px;

/* css3 transform - rotate */
-webkit-transform:rotate(180deg);
-moz-transform:rotate(180deg);
-o-transform:rotate(180deg);

/* css3 animation */
-webkit-animation-delay:1.17s;
-moz-animation-delay:1.17s;
-o-animation-delay:1.17s;
}
.loading1 > div:nth-child(8) {
left:10px;
bottom:9px;

/* css3 transform - rotate */
-webkit-transform:rotate(-135deg);
-moz-transform:rotate(-135deg);
-o-transform:rotate(-135deg);

/* css3 animation */
-webkit-animation-delay:1.3s;
-moz-animation-delay:1.3s;
-o-animation-delay:1.3s;
}

/* css3 keyframes - loading1 */
@-webkit-keyframes loading1 {
0%{ background-color:#000000 }
100%{ background-color:#FFFFFF }
}
@-moz-keyframes loading1 {
0%{ background-color:#000000 }
100%{ background-color:#FFFFFF }
}
@-o-keyframes loading1 {
0%{ background-color:#000000 }
100%{ background-color:#FFFFFF }
}

Như các bạn đã thấy , ở đây mình sử dụng keyframes, mõi bước (điểm) được chia cắt bởi nhiều độ trễ khác nhau, nào bây giờ chúng ta sẽ tham khảo cho hiệu ứng loading thứ 2

.loading2 {
height:140px;
position:relative;
awidth:140px;

/* css3 transform - scale */
-webkit-transform:scale(0.6);
-moz-transform:scale(0.6);
-o-transform:scale(0.6);
}
.loading2 > div {
background-color:#FFFFFF;
height:25px;
position:absolute;
awidth:25px;

/* css3 radius */
-moz-border-radius:15px;
-webkit-border-radius:15px;
border-radius:15px;

/* css3 animation */
-webkit-animation-name:loading2;
-webkit-animation-duration:1.04s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:linear;
-moz-animation-name:loading2;
-moz-animation-duration:1.04s;
-moz-animation-iteration-count:infinite;
-moz-animation-direction:linear;
-o-animation-name:loading2;
-o-animation-duration:1.04s;
-o-animation-iteration-count:infinite;
-o-animation-direction:linear;
}
.loading2 > div:nth-child(1) {
left:0;
top:57px;

/* css3 animation */
-webkit-animation-delay:0.39s;
-moz-animation-delay:0.39s;
-o-animation-delay:0.39s;
}
.loading2 > div:nth-child(2) {
left:17px;
top:17px;

/* css3 animation */
-webkit-animation-delay:0.52s;
-moz-animation-delay:0.52s;
-o-animation-delay:0.52s;
}
.loading2 > div:nth-child(3) {
left:57px;
top:0;

/* css3 animation */
-webkit-animation-delay:0.65s;
-moz-animation-delay:0.65s;
-o-animation-delay:0.65s;
}
.loading2 > div:nth-child(4) {
right:17px;
top:17px;

/* css3 animation */
-webkit-animation-delay:0.78s;
-moz-animation-delay:0.78s;
-o-animation-delay:0.78s;
}
.loading2 > div:nth-child(5) {
right:0;
top:57px;

/* css3 animation */
-webkit-animation-delay:0.91s;
-moz-animation-delay:0.91s;
-o-animation-delay:0.91s;
}
.loading2 > div:nth-child(6) {
right:17px;
bottom:17px;

/* css3 animation */
-webkit-animation-delay:1.04s;
-moz-animation-delay:1.04s;
-o-animation-delay:1.04s;
}
.loading2 > div:nth-child(7) {
left:57px;
bottom:0;

/* css3 animation */
-webkit-animation-delay:1.17s;
-moz-animation-delay:1.17s;
-o-animation-delay:1.17s;
}
.loading2 > div:nth-child(8) {
left:17px;
bottom:17px;

/* css3 animation */
-webkit-animation-delay:1.3s;
-moz-animation-delay:1.3s;
-o-animation-delay:1.3s;
}

/* css3 keyframes - loading2 */
@-webkit-keyframes loading2 {
0%{ background-color:#000000 }
100%{ background-color:#FFFFFF }
}
@-moz-keyframes loading2 {
0%{ background-color:#000000 }
100%{ background-color:#FFFFFF }
}
@-o-keyframes loading2 {
0%{ background-color:#000000 }
100%{ background-color:#FFFFFF }
}

Và cả hiệu ứng loading thứ 3

.loading3 > div {
background-color:#FFFFFF;
border:1px solid #000000;
float:left;
height:114px;
margin-left:5px;
awidth:30px;
opacity:0.1;

/* css3 transform - scale */
-webkit-transform:scale(0.8);
-moz-transform:scale(0.8);
-o-transform:scale(0.8);

/* css3 animation */
-webkit-animation-name:loading3;
-webkit-animation-duration:1.2s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:linear;
-moz-animation-name:loading3;
-moz-animation-duration:1.2s;
-moz-animation-iteration-count:infinite;
-moz-animation-direction:linear;
-o-animation-name:loading3;
-o-animation-duration:1.2s;
-o-animation-iteration-count:infinite;
-o-animation-direction:linear;
}
.loading3 > div:nth-child(1) {
/* css3 animation */
-webkit-animation-delay:0.24s;
-moz-animation-delay:0.24s;
-o-animation-delay:0.24s;
}
.loading3 > div:nth-child(2) {
/* css3 animation */
-webkit-animation-delay:0.48s;
-moz-animation-delay:0.48s;
-o-animation-delay:0.48s;
}
.loading3 > div:nth-child(3) {
/* css3 animation */
-webkit-animation-delay:0.72s;
-moz-animation-delay:0.72s;
-o-animation-delay:0.72s;
}
.loading3 > div:nth-child(4) {
/* css3 animation */
-webkit-animation-delay:0.96s;
-moz-animation-delay:0.96s;
-o-animation-delay:0.96s;
}
.loading3 > div:nth-child(5) {
/* css3 animation */
-webkit-animation-delay:1.2s;
-moz-animation-delay:1.2s;
-o-animation-delay:1.2s;
}

/* css3 keyframes - loading3 */
@-webkit-keyframes loading3 {
0% {
-webkit-transform:scale(1.2);
opacity:1;
}
100% {
-webkit-transform:scale(0.7);
opacity:0.1;
}
}
@-moz-keyframes loading3 {
0% {
-moz-transform:scale(1.2);
opacity:1;
}
100% {
-moz-transform:scale(0.7);
opacity:0.1;
}
}
@-o-keyframes loading3 {
0% {
-o-transform:scale(1.2);
opacity:1;
}
100% {
-o-transform:scale(0.7);
opacity:0.1;
}
}

Mình hy vọng các bạn sẽ thấy thích với kết quả mà các bạn đã làm được. Chúc các bạn thành công !

Chuyên Mục: Css

Bài viết được đăng bởi webmaster