![[Tip] Tạo hiệu ứng loading đơn giản~ Empty](https://2img.net/i/empty.gif)
Demo: loading trang của win!
Tuy thủ thuật có sử dụng javascript,
nhưng nó chỉ gói gọn trong có 3 câu lệnh. Thủ thuật này ứng dụng hình
động để tạo hiệu ứng. do đó để thực hiện thủ thuật nhỏ này bạn phải có
một tấm hình động, có thể tham khảo các hình bên dưới:
![[Tip] Tạo hiệu ứng loading đơn giản~ Loadinganimationliferaysd8](https://2img.net/r/ihimizer/img165/1922/loadinganimationliferaysd8.gif)
![[Tip] Tạo hiệu ứng loading đơn giản~ Loading](https://2img.net/h/search.nj.com/media/images/loading.gif)
Các bước thực hiện:
Đầu tiên, chèn đọan code javascript bên dưới vào head:
Save template lại.
Sau đó tạo một widget HTML/Javascript » rồi dán đọan code bên dưới vào:
Lưu ý, bạn cũng có thể gộp chung 2 code này vào trong head cũng một lúc cho tiện!
- chú ý:
top:50px;right:200px : Hãy điều chỉnh 2 thông số này để ảnh có vị trí thích hợp trên blog của bạn.
link ảnh : link ảnh động, tương tự ảnh mình đưa. Ta nên chọn các hình động có nền trong suốt.
position:fixed; : lệnh này dùng để cố định vị trí của ảnh trên màn hình(di chuyển theo khi rê chuột lên hoặc xuống), nếu muốn ảnh nằm ở một vị trí nào đó trên blog của bạn (tức là không di chuyển theo chuột) thì bạn đổi lại thành lệnh : position:absolute;
Tuy thủ thuật có sử dụng javascript,
nhưng nó chỉ gói gọn trong có 3 câu lệnh. Thủ thuật này ứng dụng hình
động để tạo hiệu ứng. do đó để thực hiện thủ thuật nhỏ này bạn phải có
một tấm hình động, có thể tham khảo các hình bên dưới:
Đầu tiên, chèn đọan code javascript bên dưới vào head:
Code:
window.onload = detectarCarga;
function detectarCarga() {
document.getElementById("imgLOAD").style.display="none";
}
Save template lại.
Sau đó tạo một widget HTML/Javascript » rồi dán đọan code bên dưới vào:
Code:
<div id="imgLOAD" style="position:fixed;top:50px;right:200px" align="right">
Đang tải...<br/>
<img src="link ảnh"/></div>
Lưu ý, bạn cũng có thể gộp chung 2 code này vào trong head cũng một lúc cho tiện!
- chú ý:
top:50px;right:200px : Hãy điều chỉnh 2 thông số này để ảnh có vị trí thích hợp trên blog của bạn.
link ảnh : link ảnh động, tương tự ảnh mình đưa. Ta nên chọn các hình động có nền trong suốt.
position:fixed; : lệnh này dùng để cố định vị trí của ảnh trên màn hình(di chuyển theo khi rê chuột lên hoặc xuống), nếu muốn ảnh nằm ở một vị trí nào đó trên blog của bạn (tức là không di chuyển theo chuột) thì bạn đổi lại thành lệnh : position:absolute;
Nguồn: Fandung.com
Chúc các bạn thành công.