App loading spinner



  • Initial loading of vendor.js and app.js can take a long time at startup, and the current white screen is not the best in terms of user experience.
    I added a simple spinner displayed while the app is loading and it’s much better.

    To do so just add the following spinner style in the head section of index.html and add the spinner class to your q-app div. That’s all! (the spinner class will be removed at app startup) :smiley:

    index.html:

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8">
        <meta name="format-detection" content="telephone=no">
        <meta name="msapplication-tap-highlight" content="no">
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
    
        <title>My app</title>
        <link rel="shortcut icon" type="image/x-icon" href="/statics/favicon.ico">
    
        <!-- CORDOVA: comment fonts CDN -->
        <link href="https://fonts.googleapis.com/css?family=Material+Icons|Roboto:100,300,400,500,700" rel="stylesheet" type="text/css">
    
        <style>
          .spinner {
            width: 100%;
            height: 100%;
            background-color: #999999;
          }
          .spinner:before {
            content: '';
            box-sizing: border-box;
            position: absolute;
            top: 50%;
            left: 50%;
            width: 100px;
            height: 100px;
            margin-top: -50px;
            margin-left: -50px;
            border-radius: 50%;
            border-top: 5px solid #ffffff;
            border-right: 5px solid transparent;
            animation: spinner .6s linear infinite;
          }
          @keyframes spinner {
            to {transform: rotate(360deg);}
          }
        </style>
      </head>
      <body>
        <div id="q-app" class="spinner">
          <!-- built files will be auto injected -->
        </div>
      </body>
    </html>
    

    @rstoenescu let me know if you think a PR would be a good idea for this feature, or if you want to do it yourself with another spinner.



  • What are you using for the actual spinner icon? I don’t see it in your code there.



  • @kayex there is no icon, just CSS. You can see the spinner here: https://jsfiddle.net/laurentpayot/j0xzsmhr/5/



  • I stole the CSS-only spinner from https://stephanwagner.me/only-css-loading-spinner. Great CSS-spinners also at https://loading.io/css/ .



  • @LaurentPayot Ahh! Got it. Thank you.



  • This is nice! However, I inverted the colors (gray spinner and white background) because otherwise it was not visible (white spinner over white background) since div#q-app (the background) has height of 0px.

    Thanks!


Log in to reply
 

Looks like your connection to Quasar Framework was lost, please wait while we try to reconnect.