Áp dụng thực tế hiệu ứng loading
Các chuyên đề loading trước đây cho chúng ta biết được cách tạo một hiệu ứng loading như thế nào, với chuyên đề này sẽ giúp các bạn biết được cách sử dụng để tạo thực tế hiệu ứng loading.
Áp dụng thực tế hiệu ứng loading
- Sau khi đã tạo xong hiệu ứng loading bằng CSS3, việc còn lại là ta cần sử dụng sao cho khi refresh lại trang, thì sẽ xuất hiện hiệu ứng loading này, và sẽ ẩn hiệu ứng, khi trang đã load xong.
- Ý tưởng cho việc này là: ban đầu ta cho hiệu ứng loading hiển thị đầu tiên, chiếm vị trí full màn hình với background trắng, sau đó thiết lập khoảng thời gian đủ để trang HTML load hoàn toàn. Để làm việc này, ta cần sử dụng đoạn script hỗ trợ, trong bài học này, hocwebchuan sẽ sử dụng đoạn jQuery với nội dung như sau:
Html viết:
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Học Web Chuẩn</title> <script src="https://code.jquery.com/jquery-latest.js"></script> <script> var loader = function() { setTimeout(function() { $('#loader').css({ 'opacity': 0, 'visibility':'hidden' }); }, 1000); }; $(function(){ loader(); }); </script> <style> * { /* reset lại margin và padding cho các tag */ margin: 0; padding: 0; } #loader { position: fixed; top: 0; left: 0; z-index: 99999; width: 100%; height: 100%; background-color: #fff; transition: all 0.3s ease-in-out; } .circle { height: 40px; margin: 50px auto; position: relative; text-align: center; width: 40px; -webkit-animation: circle_dot 2.0s infinite linear; animation: circle_dot 2.0s infinite linear; } .circle1, .circle2 { height: 60%; display: inline-block; background-color: #ef5f38; border-radius: 100%; position: absolute; top: 0; width: 60%; -webkit-animation: circle_bounce 2.0s infinite ease-in-out; animation: circle_bounce 2.0s infinite ease-in-out; } .circle2 { bottom: 0; top: auto; -webkit-animation-delay: -1.0s; animation-delay: -1.0s; } @-webkit-keyframes circle_dot { 100% { -webkit-transform: rotate(360deg) }} @keyframes circle_dot { 100% { transform: rotate(360deg); -webkit-transform: rotate(360deg) }} @-webkit-keyframes circle_bounce { 0%, 100% { -webkit-transform: scale(0.0) } 50% { -webkit-transform: scale(1.0) } } @keyframes circle_bounce { 0%, 100% { -webkit-transform: scale(0.0); transform: scale(0.0); } 50% { -webkit-transform: scale(1.0); transform: scale(1.0); } } </style> </head> <body> <div id="loader"> <div class="circle"> <div class="circle1"></div> <div class="circle2"></div> </div> </div> <p>Đây là nội dung của trang</p> </body> </html>
Hiển thị trình duyệt:
Các bạn có thể xem ví dụ về áp dụng thực tế hiệu ứng loading
- Trong ví dụ trên, chúng ta đã tạo ra hàm
loader(), với mục đích sẽ ẩn loading sau một khoảng thời gian nhất định, hàm này sẽ được chạy ngay sau khi window load trang. - Ngay lúc này, khi refresh lại trang, thì hàm loading sẽ được gọi cùng lúc với trang html, nhưng hàm loading sẽ được hiển thị bên trên với background trắng che đậy phần html bên dưới, sau một khoảng thời gian được thiết lập trong hàm
loader()(đủ để phần html load xong), thì hàm này sẽ ẩn đi nội dung loading, khi này giao diện chỉ còn lại phần html.