Framework7 - Modal de precargador

Descripción

El modal de Preloader define la acción en segundo plano y detiene las acciones del usuario durante esta acción. Utiliza el siguiente método para abrir el modal de precargador:

myApp.showPreloader([title])
- title - Es un método opcional que muestra el modal de precargador con el título.

Ejemplo

El siguiente ejemplo demuestra el uso del modal de precargador en Framework7, que indica alguna actividad en segundo plano mientras se carga el modal:

<!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>Preloader Modal</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 = "navbar">
               <div class = "navbar-inner">
                  <div class = "center sliding">Preloader Modal</div>
               </div>
            </div>
            
            <div class = "pages">
               <div data-page = "index" class = "page navbar-fixed">
                  <div class = "page-content">
                     <div class = "content-block">
                        <p><a href = "#" class = "preloader_open">Display the Preloader</a></p>
                        <p><a href = "#" class = "preloader_title">Display the Preloader with title</a></p>
                     </div>
                  </div>
               </div>
            </div>
            
         </div>
      </div>
      
      <script type = "text/javascript" 
         src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
         
      <script>
         // Here you can initialize the app
         var myApp = new Framework7();

         // If your using custom DOM library, then save it to $$ variable
         var $$ = Dom7;

         // Add the view
         var mainView = myApp.addView('.view-main', {
            // enable the dynamic navbar for this view:
            dynamicNavbar: true
         });

         $$('.preloader_open').on('click', function () {
            myApp.showPreloader();
            setTimeout(function () {
               myApp.hidePreloader();
            }, 1500);
         });
         
         $$('.preloader_title').on('click', function () {
            myApp.showPreloader('My Title')
            setTimeout(function () {
               myApp.hidePreloader();
            }, 1500);
         });
      </script>
   </body>

</html>

Salida

Realicemos los siguientes pasos para ver cómo funciona el código dado anteriormente:

Guarde el código HTML proporcionado anteriormente como modal_preloader.html archivo en la carpeta raíz de su servidor.
Abra este archivo HTML como http: //localhost/modal_preloader.html y el resultado se muestra como se muestra a continuación.
Cuando se hace clic en la primera opción, se muestra el modelo de precargador.
Cuando se hace clic en la segunda opción, se muestra el modelo de precargador junto con el título.

↰ Previous page