Giá như tạo loading Facebook bằng CSS thật đơn giản!

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.

Giá như tạo loading Facebook bằng CSS thật đơn giản!

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: 40×40
  • 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ự: 520×325.

 

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 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”

 

Okay vậy là xong rồi cái phần html nhé, quá nhanh và quá huy hiểm.

Lên cấu trúc CSS

Đã done html rồi thì bây giờ ta tạo 1 file style.css nhé. Để tô màu chơi cho vui thôi.

Nhớ link vào file html nhé

Sau đó ta mở file style.css và viết vào giống thế lầy.

Để có được kết quả là cái box:

 

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é.

Tiếp đến là mấy cái line:

 

 

Animation CSS loading

Các bạn thấy nãy giờ toàn là trò mèo đúng không? Giờ chúng ta mới vào phần trọng tâm của cái loading facebooking

 

 

Recode CSS thành SASS

Cái này cũng chẳng có gì hấp dẫn lắm, nhưng viết luôn cho bác nào thích chơi với thằng thứ ba thì chơi:

 

 

Lời kết

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.

Kipalog

Có thể quý vị chưa biết:

DVMS đã có kinh nghiệm thực tế trong tư vấn, xây dựng, triển khai mạng xã hội... Nếu quý vị có nhu cầu, vui lòng liên hệ theo thông tin phía dưới website hoặc qua form yêu cầu tư vấn:

DVMS chuyên:
- Tư vấn, xây dựng, chuyển giao công nghệ Blockchain, MẠNG XÃ HỘI,...
- Tư vấn ứng dụng cho smartphone và máy tính bảng, tư vấn ứng dụng vận tải thông minh, thực tế ảo, game mobile,...
- Tư vấn các hệ thống theo mô hình kinh tế chia sẻ như Uber, Grab, ứng dụng giúp việc,...
- Xây dựng các giải pháp quản lý vận tải, quản lý xe công vụ, quản lý xe doanh nghiệp, phần mềm và ứng dụng logistics, kho vận, vé xe điện tử,...
- Tư vấn và xây dựng mạng xã hội, tư vấn giải pháp CNTT cho doanh nghiệp, startup,...

Vì sao chọn DVMS?
- DVMS nắm vững nhiều công nghệ phần mềm, mạng và viễn thông. Như Payment gateway, SMS gateway, GIS, VOIP, iOS, Android, Blackberry, Windows Phone, cloud computing,…
- DVMS có kinh nghiệm triển khai các hệ thống trên các nền tảng điện toán đám mây nổi tiếng như Google, Amazon, Microsoft,…
- DVMS có kinh nghiệm thực tế tư vấn, xây dựng, triển khai, chuyển giao, gia công các giải pháp phần mềm cho khách hàng Việt Nam, USA, Singapore, Germany, France, các tập đoàn của nước ngoài tại Việt Nam,…

Quý khách xem Hồ sơ năng lực của DVMS tại đây >>

Quý khách gửi yêu cầu tư vấn và báo giá tại đây >>

Tặng Mã Nguồn Facebook

App đặt xe, xe công nghệ. Chi tiết

SGO Giải pháp thông minh cho các công ty vận chuyển, logistics thuê ngoài

ứng dụng quản lý vận tải thông minh

ứng dụng quản lý đội xe, điều tài thông minh

Phần mềm, ứng dụng thông minh dành cho quản lý xe doanh nghiệp, điều xe đi công tác,...

Quản lý giao vận thông minh

driverplus

fintech

banking mobile apps

insurtech

medical tech, health care mobile apps

© Social Network Solutions. All Rights Reserved. Tư vấn, xây dựng, chuyển giao mạng xã hội

Tìm kiếm