Framework7 - Trình tải trước

Sự miêu tả

Trình tải trước trong Framework7 được tạo bằng Đồ họa véc tơ có thể mở rộng (SVG) và hoạt hình bằng CSS, giúp dễ dàng thay đổi kích thước. Trình tải trước có sẵn với hai màu -

mặc định là nền sáng
một cái khác là nền tối

Bạn có thể sử dụng lớp trình tải trước trong HTML của mình như hình dưới đây -

Thí dụ

Ví dụ sau minh họa việc sử dụng trình tải trước trong Framework7:

<!DOCTYPE html>
<html>

   <head>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, 
         maximum-scale = 1, minimum-scale = 1, user-scalable = no, minimal-ui" />
      <meta name = "apple-mobile-web-app-capable" content = "yes" />
      <meta name = "apple-mobile-web-app-status-bar-style" content = "black" />
      <title>Panel Events</title>
      <link rel = "stylesheet" 
         href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />
      <link rel = "stylesheet" 
         href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" />
   </head>

   <body>
      <div class = "views">
         <div class = "view view-main">
            <div class = "pages">
               <div data-page = "home" class = "page navbar-fixed">
               
                  <div class = "navbar">
                     <div class = "navbar-inner">
                        <div class = "left"> </div>
                        <div class = "center">Framework7 Preloader</div>
                        <div class = "right"> </div>
                     </div>
                  </div>
                  
                  <div class = "page-content">
                     <div class = "content-block row">
                        <div class = "col-25"><span class = "preloader"></span><br>Default Preloader</div>
                        <div class = "col-25 col-dark"><span class = "preloader preloader-white"></span><br>White Preloader</div>
                        <div class = "col-25"><span style = "width:42px; height:42px" class = "preloader"></span><br>Big Preloader</div>
                        <div class = "col-25 col-dark"><span style = "width:42px; height:42px" class = "preloader preloader-white"></span><br>White Preloader</div>
                     </div>
                  </div>
                  
               </div>
            </div>
         </div>
      </div>
      
      <style>.col-25{padding:5px;text-align:center;}.col-dark{background:#222;}</style>
      
      <script type = "text/javascript" 
         src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
         
      <script>
         var myApp = new Framework7();
      </script>
   </body>

</html>

Đầu ra

Hãy để chúng tôi thực hiện các bước sau để xem mã đã cho ở trên hoạt động như thế nào -

Lưu mã HTML đã cho ở trên dưới dạng preloader.html tệp trong thư mục gốc máy chủ của bạn.
Mở tệp HTML này dưới dạng http: //localhost/preloader.html và kết quả được hiển thị như hình dưới đây.
Mã này hiển thị chỉ báo trình tải trước, được tạo bằng SVG và hoạt hình bằng CSS.