Dạo gần đây nhà mình hay mất mạng, mà ai cũng biết rồi dân IT, Design, Gaming, XXX, mà không có internet thì hỡi ơi cứ như là sống ở thời kì đồ đá.
Nhưng cũng nhờ thế mà tình cờ phát hiện được cái loading hay hay của facebook, twitter, bitbucket … nếu mạng bạn quá chậm nó sẽ show ra tương tự giống này.
Sau đây là chút tò mò và mô phỏng để có được sự nhấp nháy kì lạ đó.
Vẽ Photoshop cái khung
Bước này chỉ để chảnh chó là biết Photoshop thôi nha, chớ ai dùng gì vẽ cũng được, hoặc đếch cần vẽ cũng chẳng sao :D!
Mình chụp cái hình nó lại, mở cái gì đó lên check lại được mấy cái mã màu của nó. Cụ thể là:
Thumnail: #f6f7f9;
background: #e9ebee;
background line: #ebedf0;
box-shadow: #d0d1d5;
còn thiếu màu trắng tinh của trung tình cho các box bự. Các bác có thắc mắc vụ lấy mã màu gì không? Nói chung các bác lấy mã nào cũng được tại đang chém nên vẽ bậy đó thôi.
Okay, xong vụ lấy mã màu, giờ thì xác định vị trí cũng như kích thước của từng thành phần trong của cái box này.
Cụ thể là:
Thumbnail: 40x40
Line: height 6px còn width thì tuỳ chỉnh thấy đụp đụp là ổn nhé các bác
Khoản cách của line: 13px, số hơi xui tí.
Cái box bự: 520x325.
Thế là có dữ liệu thô rồi, nhào vào phần lên cúc trúc html nào.
Lên cấu trúc HTML
Rồi bây giờ chúng ta tạo 1 thưc mục, tạo 1 file tên là index.html mở nó lên bằng editor nào mà bạn thích, rồi chiến:
Nghía qua cái box bằng đôi mắt không được lé của chúng ta thì các thành phần chính như sao:
Cái box to class=”box-loading”
Cái thumbnail class=”box-thumbnail”
Có khoản 5 cái line với các kích thước khác nhau nên chúng ta có thể đặt tên là “box-line-xs, -sm, -df, -lg, -lgx”
Phần box-shadow mình viết như thế để nó gần giống với mã màu của cái line trên facebook và cũng như là all device, để vào phần Sass các bạn sẽ thấy thú vị hơn ở chổ này nhé.
body { background: #e9ebee; } // cái nào có class là box- thì nó sẽ nhận css [class*="box-"] { height: 6px; width: 400px; background: #f6f7f9; margin-bottom: 13px; margin-right: 5px; }
Okay thế là có cái loading của facebook rồi, mặt dù là hàng face nhưng hi vọng cũng có thế giúp ít cho bác nào muốn dùng.
Lưu ý:
Bạn nên đọc lại kỹ một chút về các thuộc tính background: linear-gradient, background-size, background-position và các thuộc tính animation, trước khi làm Nên tự gõ, đừng copy rồi paste, vì như thế bạn chẳng nhớ gì đâu.