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
Option | Value | Description |
---|---|---|
bg | default: '#41b883ad' | : color string |
icon | deault: 'fas fa-spinner' | : support font-awesome |
size | default: '3' | : {1, 2, 3, 4, 5} string |
icon_color | default: '#ffffff' | : color string |
slot | default: 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