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 css và hướ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
|
1 2 3 4 5 |
<div class="wrapper"> <h1>Facebook Loader in pure CSS</h1> <div id="loader"></div> </div> |
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
|
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 |
#loader{ zoom:1;/* Increase this for a bigger symbole*/ display:block; width:16px; height:16px; margin:20px auto; animation: wait .80s steps(1, start) infinite; background: linear-gradient(-90deg, #f4f5fa 1px, transparent 0, transparent 8px, #f4f5fa 8px), /* 6 */ linear-gradient(0deg, #f4f5fa 1px, #f6f9fb 0, #f6f9fb 3px, #f4f5fa 3px), linear-gradient(-90deg, #ececf5 1px, transparent 0, transparent 8px, #ececf5 8px), /* 5 */ linear-gradient(0deg, #ececf5 1px, #f2f3f9 0, #f2f3f9 3px, #ececf5 3px), linear-gradient(-90deg, #e7eaf4 1px, transparent 0, transparent 8px, #e7eaf4 8px), /* 4 */ linear-gradient(0deg, #e7eaf4 1px, #eef1f8 0, #eef1f8 3px, #e7eaf4 3px), linear-gradient(-90deg, #b9bedd 1px, transparent 0, transparent 10px, #b9bedd 10px), /* 3 */ linear-gradient(0deg, #b9bedd 1px, #d0d5e8 0, #d0d5e8 3px, #b9bedd 3px), linear-gradient(-90deg, #9fa6d2 1px, transparent 0, transparent 15px, #9fa6d2 15px), /* 2 */ linear-gradient(0deg, #9fa6d2 1px, #c0c5e1 0, #c0c5e1 3px, #9fa6d2 3px), linear-gradient(-90deg, #8490c6 1px, transparent 0, transparent 15px, #8490c6 15px), /* 1 */ linear-gradient(0deg, #8490c6 1px, #aeb5da 0, #aeb5da 3px, #8490c6 3px); background-repeat: no-repeat; background-size: 4px 9px, /* 6 */ 4px 9px, 4px 9px, /* 5 */ 4px 9px, 4px 9px, /* 4 */ 4px 9px, 4px 11px, /* 3 */ 4px 11px, 4px 16px, /* 2 */ 4px 16px, 4px 16px, /* 1 */ 4px 16px; background-position-x: -4px; /* Hide ALL */ background-position-y: 3px, 3px, 3px, 3px, 3px, 3px, 2px, 2px, 0, 0, 0, 0; } |
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é.
|
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 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 |
@keyframes wait{ 12.5%{ background-position-x: -4px, /* 6 */ -4px, -4px, /* 5 */ -4px, -4px, /* 4 */ -4px, -4px, /* 3 */ -4px, -4px, /* 2 */ -4px, 0 , /* 1 */ 0 ; } 25%{ background-position-x: -4px, /* 6 */ -4px, -4px, /* 5 */ -4px, -4px, /* 4 */ -4px, -4px, /* 3 */ -4px, 0, /* 2 */ 0, 6px, /* 1 */ 6px; } 37.5%{ background-position-x: -4px, /* 6 */ -4px, -4px, /* 5 */ -4px, -4px, /* 4 */ -4px, 0, /* 3 */ 0, 6px, /* 2 */ 6px, 12px, /* 1 */ 12px; } 50%{ background-position-x: -4px, /* 6 */ -4px, -4px, /* 5 */ -4px, 0, /* 4 */ 0, 6px, /* 3 */ 6px, 12px, /* 2 */ 12px, -4px, /* 1 */ -4px; } 62.5%{ background-position-x: -4px, /* 6 */ -4px, 0, /* 5 */ 0, 6px, /* 4 */ 6px, 12px, /* 3 */ 12px, -4px, /* 2 */ -4px, -4px, /* 1 */ -4px; } 75%{ background-position-x: 0, /* 6 */ 0, 6px, /* 5 */ 6px, 12px, /* 4 */ 12px, -4px, /* 3 */ -4px, -4px, /* 2 */ -4px, -4px, /* 1 */ -4px; } 87.5%{ background-position-x: 6px, /* 6 */ 6px, 12px, /* 5 */ 12px, -4px, /* 4 */ -4px, -4px, /* 3 */ -4px, -4px, /* 2 */ -4px, -4px, /* 1 */ -4px; } 100%{ background-position-x: 12px, /* 6 */ 12px, -4px, /* 5 */ -4px, -4px, /* 4 */ -4px, -4px, /* 3 */ -4px, -4px, /* 2 */ -4px, -4px, /* 1 */ -4px; } } /* Boring body Style */ body{ font-family:Helvetica; } .wrapper{ text-align:center; } |
Vậy là xong, tận hưởng đi ^^.
