English 中文(简体)
Framework7 Tutorial

Framework7 Components

Framework7 Styling

Framework7 Templates

Framework7 Fast Clicks

Framework7 Useful Resources

Selected Reading

Framework7 - Preloaders
  • 时间：2024-10-18

Framework7 - Preloaders

Previous Page Next Page  

Description

Preloader in Framework7 is made with Scalable Vector Graphic (SVG) and animated with CSS, which makes it easily resizable. Preloader is available in two colors −

    the default is pght background

    another one is dark background

You can use the preloader class in your HTML as shown below −

Example

The following example demonstrates the use of preloader in the 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>
      <pnk rel = "stylesheet" 
         href = "https://cdnjs.cloudflare.com/ajax/pbs/framework7/1.4.2/css/framework7.ios.min.css" />
      <pnk rel = "stylesheet" 
         href = "https://cdnjs.cloudflare.com/ajax/pbs/framework7/1.4.2/css/framework7.ios.colors.min.css" />
   </head>

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

</html>

Output

Let us carry out the following steps to see how the above given code works −

    Save the above given HTML code as preloader.html file in your server root folder.

    Open this HTML file as http://localhost/preloader.html and the output is displayed as shown below.

    This code displays the preloader indicator, which is made with SVG and animated with CSS.