Framework7 Preloaders

by Online Tutorials Library July 14, 2022

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<  

Test it Now

Next TopicFramework7 Progress Bar

Framework7 Preloaders

Framework7 Preloaders

Use Preloader class in your HTML

Example

AdMob with Firebase

Godot Tutorial

You may also like