Vue loading spinner change to bars/dots in laravel vuejs

I’ve been following the reference below and I’ve already implement this on my project, but the problem is I want to change the loading from spinner into dots or bars. Currently I have this output which is the default spinner. It would be great if anybody could figure out, thank you so much in advance!.

Reference documentation Vueloadingoverlay

Based on the documentation, just simply add :loader="bars" under <loading> tag but it didn’t work for me, here’s my code.

Import.blade.php: <Loading> Tag area

<div class="vld-parent">
    <loading 
        :loader="bars"
        :active.sync="isLoading" 
        :can-cancel="false" 
        :is-full-page="fullPage">
    </loading>
    <div class="kt-portlet__body">
        <div class="alert alert-secondary" role="alert">
            Download example import format!. <strong><a href="">import.xlsx</a></strong>
        </div>
        <div class="row">            
            <div class="col-md-6 col-sm-12 col-xs-12">                
                <div class="form-group">
                    <label>{{ __('staff/forms.stocks_upload') }} </label>                
                    <div class="custom-file">
                        <input type="file" class="custom-file-input" id="file" name="file" accept=""/>                
                        <label class="custom-file-label" for="file">Choose file</label>                
                    </div>
                    {!! $errors->first('file', '<div class="invalid-feedback">:message</div>') !!}
                </div> 
            </div>        
        </div>
    </div>
    <div class="kt-portlet__foot">
        <div class="kt-form__actions">        
            <button type="submit" class="btn btn-primary" @click="loadingEvent()" style="margin-top: 40px;">{{ __('staff/buttons.import') }}</button>
        </div>
    </div>
</div>

import.js

 module.exports = function(data) {
    var _data = {
        config: null, 
        isLoading: false,
        fullPage: true   
    };
    return {
        data: (() => Object.assign({}, JSON.parse(data), _data)),
        mounted() {
            this.init();
        },
        methods: {
            init() {
                var vm = this;
                $(document).ready(function() {
                    vm.$toaster.init();                   
                });
            },
            loadingEvent(){
                this.isLoading= true;        //thi will show the spinner loader
            },
            onCancel() {
                this.loading= false;
              }
        },
        
    }
};

I just separate the component and put the import in app.js

import Loading from 'vue-loading-overlay';
import 'vue-loading-overlay/dist/vue-loading.css';

Vue.component('loading', Loading);

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

The below has been snipped from the component’s documentation.

Make sure you pass ‘bars’ prop as string.

In your code that should look like:

Option 1 (note the excluded colon and single quotes):

<loading 
    loader="bars"
    :active.sync="isLoading" 
    :can-cancel="false" 
    :is-full-page="fullPage">
</loading>

Option 2 (with dynamic prop – that’s not necessary in your case):

<loading 
    :loader="'bars'"
    :active.sync="isLoading" 
    :can-cancel="false" 
    :is-full-page="fullPage">
</loading>

See more about dynamic props:
https://vuejs.org/v2/guide/components-props.html#Passing-Static-or-Dynamic-Props

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0