Framework7 Preloaders

In Framework7, Preloaders are made with Scalable Vector Graphics and animated with CSS. It makes it easily resizable. Preloader is available in two colors:

Use Preloader class in your HTML

Example

Let's take an example to demonstrate the use of preloaders in 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>

Next TopicFramework7 Progress Bar

← prev next →