Press "Enter" to skip to content

How to Add Preloader GIF in HTML Page | Vuejs Loading Screen

Vuejs loading screen used to block while the client is processing work that displays a full-screen loading screen with a custom spinner button when content is loaded into your app.

page loading animation, how to add preloader gif in html page, loading page html template, full page loader, website loading animation, bs page loading spinner

How to make use of it:

Install and download:

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

1. Import and register vue download 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 HTTP requests are sent 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. Options available 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 upload button by selecting HTML in the slot option.

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

Configurations

OptionValueDescription
bgdefault: '#41b883ad': color string
icondeault: 'fas fa-spinner': support font-awesome
sizedefault: '3': {1, 2, 3, 4, 5} string
icon_colordefault: '#ffffff': color string
slotdefault: font-awesome: raw html

Fullpage Loading Screen With Custom Spinner, Vuejs Loading Screen Plugin/Github, website preloader


See Demo And Download

Official Website(HELMAB): Click Here

This superior jQuery/javascript plugin is developed by HELMAB. For extra advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *