Áp Dụng Thực Tế Hiệu ứng Loading Chuyên đề - Học Web Chuẩn

Trang chủ » Hiệu ứng Loading » Áp Dụng Thực Tế Hiệu ứng Loading Chuyên đề - Học Web Chuẩn

Có thể bạn quan tâm

Chuyên đề
  • Trang chủ
  • Chuyên đề HTML5/CSS3
  • Loading
  • Áp dụng thực tế hiệu ứng loading

HỌC WEB CHUẨN

HƯỚNG DẪN HỌC

  • Hướng dẫn học
  • Hướng dẫn học XHTML & HTML5
  • Hướng dẫn học CSS
  • Hướng dẫn học CSS3
  • Hướng dẫn học Responsive
  • Hướng dẫn học ES6
  • Hướng dẫn học React.js
  • Hướng dẫn học jQuery
  • Hướng dẫn học PHP
  • Hướng dẫn học Laravel
  • Hướng dẫn học Wordpress
  • Hướng dẫn học Webpack
  • Hướng dẫn học SCSS

THAM KHẢO

  • Tham khảo
  • Tham khảo HTML4/XHTML
  • Tham khảo HTML5
  • Tham khảo CSS
  • Tham khảo CSS3
  • Tham khảo jQuery

CHUYÊN ĐỀ

Chuyên đề

  • Chuyên đề HTML/CSS (43)
    • Block list (6)
    • List (5)
    • Navigation (5)
    • Pagenation (6)
    • Paragraph (8)
    • Table (7)
    • Tiêu đề (6)
  • Chuyên đề HTML5/CSS3 (20)
    • Border radius (7)
    • Box hover (5)
    • Box shadow (4)
    • Loading (4)
  • Chuyên đề jQuery / JS (15)
    • Form (6)
    • Layout (9)
  • jQuery/JS plugin (16)
    • BiggerLink (3)
    • Fixheight (2)
    • Pie (4)
    • Pop up (3)
    • Tab (2)
    • Tooltips (2)

Nội dung mới nhất

  • Áp dụng thực tế hiệu ứng loading
  • Box hover 2 image
  • Box hover fade
  • box hover slide element
  • Box hover chuyển động thành phần
  • Box hover scale image
  • Loading syle css3 – circle 02
  • Loading syle css3 – circle
  • Loading style css3 – square
  • Box-shadow sử dụng khi hover

Liên kết nhanh

add align biggerlink Block list Border radius box-shadow box hover css3 fixheight form jQuery layout list loading Navigation pa Pagenation paragraph Pie popup tab Table tiêu đề tooltips

GÓP Ý - LIÊN HỆ

  • CÔNG CỤ TẠO CSS3CSS3 GENERATOR
  • BỘ CÔNG CỤGENERATOR TOOLS
  • CÔNG CỤ HỖ TRỢWEB TOOLS
  • CÔNG CỤ TẠO RANDOMRANDOM GENERATOR
  • CÔNG CỤ KIỂM TRA RESPONSIVE TEST
  • CHIA SẺ HAYWEB & TOOLS
  • Follow us on hocwebchuan.com
  • Short URL
  • Rabbie theme
Áp dụng thực tế hiệu ứng loading

Trở về

  • 8,053

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.

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Comment

Name *

Email *

Website

Save my name, email, and website in this browser for the next time I comment.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Post navigation

Previous post: Box hover 2 image

Từ khóa » Hiệu ứng Loading