No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    App loading spinner

    Framework
    4
    7
    3206
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • LaurentPayot
      LaurentPayot last edited by

      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) 😃

      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.

      1 Reply Last reply Reply Quote 1
      • K
        kayex last edited by

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

        LaurentPayot 1 Reply Last reply Reply Quote 0
        • LaurentPayot
          LaurentPayot @kayex last edited by LaurentPayot

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

          1 Reply Last reply Reply Quote 0
          • LaurentPayot
            LaurentPayot last edited by LaurentPayot

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

            1 Reply Last reply Reply Quote 0
            • K
              kayex last edited by

              @LaurentPayot Ahh! Got it. Thank you.

              1 Reply Last reply Reply Quote 0
              • P
                polger last edited by

                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!

                digiproduct 1 Reply Last reply Reply Quote 0
                • digiproduct
                  digiproduct @polger last edited by

                  Just discovered this old post … it seems like a good idea.

                  I notice that it was never implemented in index.tmplate.html

                  Was it considered for inclusion and rejected?

                  1 Reply Last reply Reply Quote 2
                  • First post
                    Last post