Facebook loading style với CSS

Tiếp tục là một bài nữa, bài này sẽ hướng dẫn cách tạo kiểu loading giống với facebook, nhưng điều đặc biệt là chỉ sử dụng css thôi nhé.

Trên ShareCodeWeb cũng đã có khá nhiều bài viết về tạo trang loading sử dụng csshướng dẫn tạo ảnh load động bằng photoshop nhưng ở bài này mình sẽ hướng dẫn các bạn làm một kiểu loading khác giống với facebook nhìn rất cool. Và bài này mình sẽ không đưa demo bằng ảnh lên cho các bạn xem, hy vọng các bạn sẽ thấy tò mò mà thực hành để tự mình trải nghiệm với thành quả thì sẽ hay hơn.
OK. Bắt tay nào, File HTML của chúng ta rất đơn giản, chỉ gồm 2 thẻ div, một thẻ có id là wrapper và 1 thẻ có id là loader

Và css của chúng ta cũng rất đơn giản, chỉ gồm 2 phần, phần đầu là khởi tạo hình vẽ cho id loader

Phần 2 sẽ sử dụng sự hỗ trợ của CSS3 đó là keyframe để delay hình ảnh cho giống ảnh động nhé.

Vậy là xong, tận hưởng đi ^^.

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