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

<b>Loading abc@gmail.com...</b>
<div class="loader-gmail"></div>

1 2	<b>Loading abc@gmail.com...</b> <div class="loader-gmail"></div>

Đ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

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

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;

}

Ở đâ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

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

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

HTML

CSS

Like this:

Có liên quan

Nguyễn Trung Hiếu

HTML

CSS

Share this:

Like this:

Có liên quan

Nguyễn Trung Hiếu