Share Code Web - Chia sẻ niềm đam mê bất tận > Lập trình > Web Design > HTML/CSS > 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
Nguyễn Trung Hiếu
Share Code Web Company 2013

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:

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ỉ.
loading like gmail

HTML

Đ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

Ở đây ta sử dụng 2 hiệu ứng animation được định nghĩa ở trên là Loadingprogress. 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!

Tác giả: Nguyễn Trung Hiếu

Một blogger ... cùi bắp! Đơn giản: tôi muốn ghi lại những gì xảy ra xung quanh, cả công việc lẫn cuộc sống và chia sẻ với các bạn đọc. Nếu bạn cảm thấy bài viết có nhiều điểm không chính xác, hãy comment và chia sẻ để tôi còn được học hỏi từ những góp ý của bạn. Email: hieunt.dcn@gmail.com

http://sharecodeweb.net/?s={search_term_string}