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: 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 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”
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
< ! DOCTYPE html >
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< title > Loading - facebook < / title >
< link rel = "stylesheet" href = "style.css" >
< / head >
< body >
< div class = "box-loading" >
< div class = "box-thumbnail" > < / div >
< div class = "box-line-sm" > < / div >
< div class = "box-line-xs" > < / div >
< div class = "box-line-df" > < / div >
< div class = "box-line-lgx" > < / div >
< div class = "box-line-lg" > < / div >
< / div >
< / body >
< / html >
|
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é
|
1
2
3
|
< link href = "style.css" >
|
Sau đó ta mở file style.css và viết vào giống thế lầy.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
|
body {
background : #e9ebee;
}
. box - loading {
background : #fff;
height : 325px ;
width : 520px ;
display : block ;
box - shadow : 0 1px 1px rgba ( 0 , 0 , 0 , 0.1 ) ;
- o - box - shadow : 0 1px 1px rgba ( 0 , 0 , 0 , 0.1 ) ;
- moz - box - shadow : 0 1px 1px rgba ( 0 , 0 , 0 , 0.1 ) ;
- webkit - box - shadow : 0 1px 1px rgba ( 0 , 0 , 0 , 0.1 ) ;
border - radius : 3px ;
- o - border - radius : 3px ;
- moz - border - radius : 3px ;
- webkit - border - radius : 3px ;
margin : 0 auto ;
}
|
Để 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:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
|
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 ;
}
. box - loading {
background : #fff;
height : 305px ;
width : 500px ;
padding : 10px ;
display : block ;
box - shadow : 0 1px 1px rgba ( 0 , 0 , 0 , 0.1 ) ;
- o - box - shadow : 0 1px 1px rgba ( 0 , 0 , 0 , 0.1 ) ;
- moz - box - shadow : 0 1px 1px rgba ( 0 , 0 , 0 , 0.1 ) ;
- webkit - box - shadow : 0 1px 1px rgba ( 0 , 0 , 0 , 0.1 ) ;
border - radius : 3px ;
- o - border - radius : 3px ;
- moz - border - radius : 3px ;
- webkit - border - radius : 3px ;
margin : 0 auto ;
}
. box - thumbnail {
height : 40px ;
width : 40px ;
float : left ;
margin - right : 20px ;
display : inline - block ;
}
// chịu khó viết style cho từng line nhé
. box - line - sm {
width : 120px ;
margin - top : 10px ;
margin - left : 50px ;
}
. box - line - xs {
width : 80px ;
margin - left : 50px ;
}
. box - line - df {
margin - top : 30px ;
width : 380px ;
}
. box - line - lg {
width : 200px ;
}
. box - line - lgx {
width : 450px ;
}
|
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
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
[ class *= "box-line" ] ,
. box - thumbnail {
animation : timeline ; // tên của animation để truyền action
animation - duration : 1s ; // thời gian thực thi action
animation - timing - function : linear ; // hiệu ứng cho action, có nhiều lắm thực chất nó là cubic-bezier, ai muốn custom thì xem link này http://cubic-bezier.com
animation - iteration - count : infinite ; // số lần chạy action, mình cho nó vô tận luôn
background : linear - gradient ( to right , #eeeeee 8%, #dddddd 18%, #eeeeee 33%); // gradient cho từng cái line
background - size : 800px auto ; // kích thước của cái bóng mờ mờ (gradient)
}
// hành động của animation cho nó chạy từ trái sang phải
@ keyframes timeline {
0 % {
background - position : - 350px 0 ;
}
100 % {
background - position : 400px 0 ; }
}
|
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:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
|
body {
background : #e9ebee;
}
[ class *= "box-" ] {
height : 6px ;
width : 400px ;
background : #f6f7f9;
margin - bottom : 13px ;
margin - right : 5px ;
}
@ mixin box - shadow ( $ box_shadow ) {
box - shadow : $ box_shadow ;
- o - box - shadow : $ box_shadow ;
- moz - box - shadow : $ box_shadow ;
- webkit - box - shadow : $ box_shadow ;
}
@ mixin border - radius ( $ border_radius ) {
border - radius : $ border_radius ;
- o - border - radius : $ border_radius ;
- moz - border - radius : $ border_radius ;
- webkit - border - radius : $ border_radius ;
}
. box {
& - loading {
background : #fff;
height : 305px ;
width : 500px ;
padding : 10px ;
display : block ;
margin : 0 auto ;
@ include box - shadow ( 0 0 0 rgba ( 0 , 0 , 0 , 0.1 ) ) ;
@ include border - radius ( 3px ) ;
}
& - thumbnail {
height : 40px ;
width : 40px ;
float : left ;
margin - right : 20px ;
display : inline - block ;
}
}
. box - line {
& - sm {
width : 120px ;
margin - top : 10px ;
margin - left : 50px ;
}
& - xs {
width : 80px ;
margin - left : 50px ;
}
& - df {
margin - top : 30px ;
width : 380px ;
}
& - lg {
width : 200px ;
}
& - lgx {
width : 450px ;
}
}
[ class *= "box-line" ] ,
. box - thumbnail {
animation : timeline ;
animation - duration : 1s ;
animation - timing - function : linear ;
animation - iteration - count : infinite ;
background : linear - gradient ( to right , #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
background - size : 800px auto ;
background - position : 100px 0 ;
}
@ keyframes timeline {
0 % {
background - position : - 350px 0 ;
}
100 % {
background - position : 400px 0 ; }
}
|
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:
- Hướng dẫn tạo trang mạng xã hội với HumHub
- 34 sản phẩm phần mềm Social Networking tốt nhất
- Nội dung trên Facebook trái phép ở Việt Nam chỉ bị ẩn ở Việt Nam
- Bảo vệ bản thân trên mạng xã hội
- Kinh doanh trên sàn thương mại điện tử hay mạng xã hội?
- Social network là gì? Cách tạo nền tảng social network chỉ với 5 bước đơn giản
- Cảnh báo lộ thông tin tài khoản ngân hàng trên mạng xã hội
- Tin CNN chiếu phim sex gây lo ngại về tin tức giả mạo từ mạng xã hội
- Framework AI của Facebook sẵn sàng ra mắt người dùng, tích hợp sẵn với Google Cloud, AWS và Azure Machine Learning
- Hack khách hàng của Facebook Fanpage
- Đăng ảnh vé máy bay lên mạng xã hội - nguy hiểm khôn lường
- Khe cửa hẹp cho mạng xã hội 'made in Vietnam' ?
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 >>
Có thể bạn quan tâm:
MẠNG XÃ HỘI ĐỊA ĐIỂM | Tư vấn, xây dựng, chuyển giao & đồng hành
Xem mô tả chi tiết hơn tại đây >>
Tặng Mã nguồn mạng xã hội giống y Facebook
Quản lý thu chi kinh doanh, tài chính cá nhân,... trên điện thoại và máy tính bảng.
Đầy đủ tính năng cần thiết và dễ dàng sử dụng. Dùng miễn phí nhưng an toàn tuyệt đối!
Quản lý thu chi kinh doanh.
Quản lý thu chi bán hàng online.
Quản lý thu chi cửa hàng.
Quản lý vay nợ, trả nợ.
Quản lý thanh khoản hợp đồng.
Quản lý tài chính cá nhân.
Quản lý tài chính hộ gia đình.
Quản lý tài khoản tiền mặt, tài khoản ngân hàng.
An toàn, không sợ bị lộ dữ liệu tài chính.
Dễ dàng thao tác mọi lúc mọi nơi.
* Ứng dụng của chúng tôi hoàn toàn miễn phí, chạy offline, trên ứng dụng chỉ có banner quảng cáo nhỏ của Google. Chúng tôi không thu thập dữ liệu người dùng, không cài cắm các phần mềm độc hại, không gây tốn pin,...
Cài đặt và sử dụng hoàn toàn miễn phí và an toàn khi sử dụng cho điện thoại và máy tính bảng Android TẠI ĐÂY >>
hoặc qua QRCODE sau:
Cài đặt và sử dụng hoàn toàn miễn phí và an toàn khi sử dụng qua file APK, tải file tại đây >>
Xem hướng dẫn chi tiết từng tính năng tại phần Hướng dẫn >>
- Các nền tảng công nghệ hỗ trợ cho KHỞI NGHIỆP và CHUYỂN ĐỔI SỐ tiết kiệm, hiệu quả,...
- 5 lý do sở hữu một ứng dụng di động là cần thiết đối với doanh nghiệp vừa và nhỏ
- Hệ thống điều hành, tìm gọi và quản lý xe sử dụng công nghệ mới
- Khắc phục lỗi đăng nhập Windows 10, không thể login vào Windows 10
- Mạng xã hội là gì? Hiểu đầy đủ nhất về mạng xã hội
- IoT là gì? ứng dụng của IoT trong cuộc sống hiện đại
- Hướng dẫn cài ứng dụng, phần mềm cho Android trực tiếp bằng tập tin APK
- Ứng dụng bán hàng trên smartphone, smart TV, mạng xã hội...
- 100 Website đặt backlink miễn phí chất lượng
- Platform là gì?
- Cách đổi tên thiết bị Android
- Hệ thống order chuyên nghiệp cho quán ăn, cafe, nhà hàn
- Thông tin Du Lịch có ngay trong túi mọi người
- Phân hệ Quản lý Đội xe (Fleet Management) trong một hệ thống ERP thường có gì?
- Giải pháp cho dịch vụ bác sĩ gia đình
- Hệ thống chấm công từ xa thông minh SAttendance và hệ thống định vị STracking
- Phòng khám, bệnh viện thông minh
- Bác sĩ gia đình, chăm sóc sức khỏe tại nhà
- Kinh doanh vé xe, đặt vé xe, vé máy bay trên smartphone, Smart TV, Mạng xã hội
- Tìm bất động sản, tìm nhà đất, tìm phòng theo mô hình uber trên smartphone
- App hẹn lịch chăm sóc sắc đẹp, book vé spa, massage
- STracking ứng dụng chấm công nhân viên làm các công việc ngoài văn phòng công ty
- Nhà thuốc, dược trên smartphone và tablet
- VIP Finance Hệ Sinh Thái phân tích đánh giá cổ phiếu, trái phiếu, thị trường vàng, thị trường forex
Bằng cách đăng ký kênh và chia sẻ bài, bạn đã cùng DVMS chia sẻ những điều hữu ích