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

Xem: 1004    Tải: 0   Thảo luận: 0   Mục: HTML-CSS template   Lĩnh vực: Khác

0 điểm   ( 4 đánh giá ) File đã được kiểm thử


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:

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>

Đoạn HTML của chúng ta vô cùng đơn giản, gồm 2 thẻ là thẻ bthẻ 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;
  }
}
Ở đâ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

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

Hướng dẫn tạo hiệu ứng loading giống gmail Đăng ngày 11-09-2014  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? 5/10 1004

Thảo luận:

Để bình luận bạn phải đăng nhập thành viên.

File tương tự

Files cùng mục

 

File tải nhiều nhất

Megacode.vn - Thư viện mã nguồn chia sẻ, tải file cho cộng đồng
Copyright © 2013-2016. All rights reserved. Bản quyền thuộc VinaGon
Địa chỉ: Số 38 Hàng Bè, Hàng Bạc, Hoàn Kiếm, Hà Nội.
Văn phòng giao dịch: Phòng 28, Tầng 6, HH1A Linh Đàm, Hoàng Mai, Hà Nội
Email: info@vinagon.com | Website: www.vinagon.com | Điện thoại: (+844) 6. 32.979.36;
logo megacode

Megacode đã đăng ký với Bộ Công Thương
Thư viện mã nguồn mở lớn nhất Việt Nam.



Hỗ trợ khách hàng trên Megacode
Hỗ trợ kỹ thuật cho thành viên:
Tổng đài: (+844) 6. 32.979.36
Số di động (Hotline): 0969.091.265
Thời gian làm việc:
Sáng: 8h-12h; Chiều: 13h30-17h30
(Nghỉ chiều T7, CN và các ngày lễ, tết)
Chat với Megacode
https://www.facebook.com/megacodevn