Add preload spinner



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


  • Admin

    Will do. Thanks for posting this.


Log in to reply
 

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