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 icon loading đẹp mắt với HTML5 và CSS3
Hướng dẫn tạo icon loading đẹp mắt với HTML5 và CSS3
Nguyễn Trung Hiếu
Share Code Web Company 2012

Hướng dẫn tạo icon loading đẹp mắt với HTML5 và CSS3

Với sự ra đời của HTML5 và CSS3, chúng hỗ trợ chúng ta rất nhiều, và bài viết này sẽ hướng dẫn các bạn tạo icon loading mà không cần phải sử dụng ảnh động cũng như js.

Xem qua demo cái chứ nhỉ
loading with html5 and css3
I. HTML

Thiết kế HTML đơn giản thôi

Trang HTML gồm có 2 class chính là Loadingloading-dot.
II.CSS
Bắt tay vào viết CSS cho nó cái nhỉ
Đầu tiên là nền của trang

Class Loading

Vẽ các dấu chấm nào.

Để các dấu chấm có thể chuyển động giống với việc loading hơn thì ta cho một tí animation cho từng dấu chấm một.Mỗi dấu chấm sẽ xuất hiện theo thời gian. Và để chọn giữa các node của các phần tử html, chúng ta dùng selector nth-child(n) với n là vị trí của tag mà chúng ta muốn lấy
Dấu thứ nhất delay 0s

Dấu thứ hai delay 0.1s

Dấu thứ ba delay 0.2s

Dấu thứ tư delay 0.3s

Ngoài ra để có thể chạy được với mỗi trình duyệt khác nhau, chúng ta cần phải thêm các đoạn mã dưới đây, tương ứng với từng trình duyệt, để chúng có thể hiểu được bạn muốn gì.

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

Loạt bài viết về Loading style with css

Related Posts

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

Leave a comment

Bạn phải Đăng nhập để tham gia bình luận.

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

Blog Stats

  • 5.686 hits
%d bloggers like this: