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

    Add preload spinner

    Show & Tell
    2
    2
    3166
    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.
    • Martin
      Martin last edited by

      1. create a styled re-usable Loader.js with the quasar Loading component…
        more info: http://quasar-framework.org/components/loading.html
      import {Loading} from 'quasar-framework'
      const Loader = {
        show : () => {
          Loading.show(
            {
              delay        : 300,
              message      : 'Loading...',
              messageColor : '#C86F51',
              spinner      : 'tail',
              spinnerSize  : 60, // in pixels
              spinnerColor : '#C86F51'
            }
          )
        },
        hide : () => {
          Loading.hide()
        }
      }
      export default Loader
      
      1. import Loader.js into your Vue component, and attach the methods…
      <script>
        import Loader from '../common/Loader.js'
      ... 
       export default {
          methods : {
            hideLoader () {
              Loader.hide()
            },
            showLoader() {
              Loader.show()
            },
      ...
      
      1. add “show” to the Component’s “created()” function…
      ...
      created() {
            this.showLoader()
          },
      ...
      
      1. add “hide” to the template’s img tag load event.
        more info about html events here :
        http://www.quackit.com/html_5/tags/html_5_event_handler_content_attributes.cfm
      <template>
      ...
      <div>
            <img
              @load="hideLoader()"
              class="responsive"
              :src="user.avatar"/>
          </div>
      ...
      

      That’s about it.
      I will do a quasar request for a preload spinner, specifically inside img tags.
      Saves us some boiler code 😉

      1 Reply Last reply Reply Quote 0
      • rstoenescu
        rstoenescu Admin last edited by

        Will do. Thanks for posting this.

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