Fullpage Loading Screen With Custom Spinner – Vue-loading

Install & Download:

# NPM
$ npm i vuejs-loading-screen --save

Description:

Yet another loading indicator library for Vue that displays a fullscreen loading screen with a custom spinner when content is being loaded in your app.

How to use it:

1. Import and register the vue loading component.

import Vue from 'vue'
import loading from 'vuejs-loading-screen'

Vue.use(loading,{
  // options here
})

2. This example shows how to display the loading screen when sending HTTP requests and hide it when the requests are finished.

export default {
  methods: {
    sendHttpRequest () {
      this.$isLoading(true) // show the loading screen
      this.$axios.post(url, params)
      .then(({data}) => {
        // data
      })
      .finally(() => {
        this.$isLoading(false) // hide the loading screen
      })
    }
  },
  mounted () {
    this.sendHttpRequest()
  }
}

3. Available options to customize the loading screen.

Vue.use(loading,{
  // background color
  bg: '#41b883ad',
  // spinner icon
  // requires Font Awesome
  icon: 'fas fa-spinner',
  // spinner size:
  // 1 to 5
  size: 3,
  // icon color
  icon_color: '#ffffff',
})

4. You can also customize the loading spinner by defining the HTML in the slot option.

Vue.use(loading,{
  slot: `
    <div>
      <h3><i class="fas fa-spinner fa-spin"></i> Loading...</h3>
    </div>
  `
})

Preview:

Changelog:

v1.10.2 (04/06/2022)

• Remove unused dependencies

v1.10.1 (11/01/2021)

• Translate custom text