Framework7 预加载器

2024 年 12 月 17 日 | 1 分钟阅读

在 Framework7 中，预加载器使用可缩放矢量图形制作，并使用 CSS 进行动画处理。这使其易于调整大小。预加载器有两种颜色可用

在你的 HTML 中使用 Preloader 类

示例

让我们举个例子来演示在 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>

下一主题Framework7 进度条

Framework7 预加载器

在你的 HTML 中使用 Preloader 类

示例

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

Framework7 教程

Framework7 表单

Framework7 选项卡

F7 Swiper 滑块

F7 图片浏览器

F7 选择器

F7 日历

F7 杂项

面试题

Framework7 预加载器

在你的 HTML 中使用 Preloader 类

示例

相关帖子

F7 卡片

F7 进度条

F7 侧边栏

F7 内容块

F7 手风琴

F7 按钮

Framework7 教程

F7 操作按钮

F7 芯片

F7 导航栏

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器