Hướng dẫn tạo hiệu ứng loading giống gmail

Có bạn nào từng để ý hiệu ứng này chưa, đó là khi bạn login vào gmail, sau đó nó sẽ có một hiệu ứng loading nhìn rất hay. Và bạn nào từng hỏi làm sao để làm được việc đó hay không?

Với cái này, bạn có thể làm 2 cách:

• Một là sử dụng ảnh GIF tạo ảnh động là được
• Hai là sử dụng CSS để tạo hiệu ứng

Với cách thứ nhất mình sẽ không giới thiệu ở đây, mình chỉ giới thiệu cách thứ 2 đó là dùng CSS mà thôi.
OK bắt tay vào thiết kế thôi chứ nhỉ.

HTML

[PHP]
Loading abc@gmail.com…

[/PHP]
Đoạn HTML của chúng ta vô cùng đơn giản, gồm 2 thẻ là thẻ b và thẻ div có class là loader-gmail

CSS

Sau đó bạn sử dụng đoạn css sau
[CSS]
body {
background: rgb(245,245,245);
}
b {
position: absolute;
top: calc(50% – 26px);
left: 50%;
transform: translateX(-50%);
font-family: arial,sans-serif;
}
.loader-gmail {
position: absolute;
top: calc(50% – 6px);
left: calc(50% – 160px);

border: 1px solid #a4a4a4;
width: 320px;
height: 8px;
background-image: linear-gradient(135deg, #6187f2 0%, #6187f2 25%, #5679da 25%, #5679da 50%, #6187f2 50%, #6187f2 75%, #5679da 75%, #5679da 100%);
background-repeat: repeat;
background-position: 0px 0px;
background-size: 16px 16px;
background-clip: content-box;
padding: 1px;
animation: loading 1s linear infinite;
}

.loader-gmail:after {
position: absolute;
right: 0;
height: 8px;
background: rgb(245,245,245);
z-index: 20;
animation: progress 4s ease-in-out infinite;
content: ”;
}

@keyframes loading {
from {
background-position: 0px 0px;
}
to {
background-position: -16px 0px;
}
}

@keyframes progress {
0% {
min-width: 100%;
}
30% {
min-width: 80%;
}
50% {
min-width: 65%;
}
69% {
min-width: 20%;
}
85% {
min-width: 0;
}
100% {
min-width: 0;
}
}
[/CSS]
Ở đây ta sử dụng 2 hiệu ứng animation được định nghĩa ở trên là Loading và progress. Vậy là xong rồi đó, thử view lên xem giống y đúc chưa nào
Ngoài ra bạn cũng có thể tham khảo một số hiệu ứng loading đã được sharecodeweb chia sẻ trước đây

• Tạo hiệu ứng loading cực đẹp giống PayPal trong css
• Facebook loading style với CSS
• Hướng dẫn tạo icon loading đẹp mắt với HTML5 và CSS3

Chúc các bạn thành công!