[Vuejs]-How to add preloading animation in vue.js spa application using SVG

by

4👍

✅

VueJS has lifecycles. The most important for that are :
beforeCreate, created, beforeMount, mounted.
So, In your component, below the data, you can write some logic in these lifecycles.
So, for example in beforeCreate or created hook you can display your SVG loader, and then in mounted (inserted in DOM), you hide it.

Example : 

 //MyComponent.vue
      <template>
         ...
      </template

    <script>
      export default {
        data() {
            return {
            article : {},
            user_id: null
        },
        created() {
         //Display your SVG
        },
        mounted() {
        //Hide your SVG
        },
        methods: {
        //etc,etc
        }
    </script>
👤priMo-ex3m

Leave a comment