This article will help you to implement a simple Vue.js loading spinner example.
It’s important to make the UI that should be user-friendly for the user. So, at that time, it’s crucial to show a loader when calling data from server.
Also, the loader should be customizable with multiple options based on the screen of the user and compatible with the application UI.
Therefore, this example will make it for you. So, let’s get started with Vue.js loading spinner example.
Install Loading Spinner (Vue-spinner component)
Note: I assume that you know how to install a Vue.js app using terminal, if not, you can learn How to install Vue.js app.
First of all, let’s install the vue-spinner in our app.
# Using NPM
[js]
npm install vue-simple-spinner –save
[/js]
OR
# Using YARN
[js]
yarn add vue-simple-spinner
[/js]
Usage of Vue.js Loading Spinner Example
Now, let’s import it in our entry point of the application.
/src/main.js
[js]
import Spinner from ‘vue-simple-spinner’
[/js]
Here, we’ve two options to use this component. One is directly using it in a component or define it as global component to use it throughout the application.
I’m using this component globally.
[js]
Vue.component(‘vue-simple-spinner’, Spinner)
[/js]
Finally, let’s use it in template file by just putting a single line of code.
/src/App.vue
[html]
[/html]
Here we go! it should show a simple and default spinner on your Vue.js app.
As mentioned earlier, it’s very important to have a basic configuration for any loading spinner. So, let’s get dig into the configuration that is easy and simple to use.
Options For Vue Spinner
Now, let’s try and use some of the important options for basic configuration for our Vue spinner example.
1. Size of Vue Spinner
Here, you have options for size are tiny, small, large, big, huge, massive.
[html]
[/html]
It could be number as well to customize in the size.
[html]
[/html]
2. Line options of Vue Spinner
Also, you can change the size of the line for your spinner.
[html]
[/html]
Also, you can change the foreground and background color of the line of spinner.
[html]
[/html]
3. Speed and Spacing of Vue Spinner
Also, you can customize the speed of the vue spinner by using a speed property.
[html]
[/html]
Here, you can modify the spacing between the message and the spinner.
[html]
[/html]
4. Message options of Vue Spinner
Impotantly, you can change the font of the messaged that you wanna show with the vue spinner.
[html]
[/html]
Also, you can change the color of message as per your UI need.
[html]
[/html]
That’s it! it’s the easiest way to implement a Vue.js loading spinner example within your app.
Here, is code that can help you to verify.
[codegroup]
[js tab=”main.js”]
//Import Vue
import Vue from ‘vue’
//Import App Component
import App from ‘./App’
//Import Router
import router from ‘./router’
//Import Spinner component
import Spinner from ‘vue-simple-spinner’
Vue.config.productionTip = false
//Make it use a plugin
Vue.component(‘vue-simple-spinner’, Spinner)
/* eslint-disable no-new */
new Vue({
el: ‘#app’,
router,
template: ‘
components: { App }
})
[/js]
[html tab=”App.vue”]
[/html]
[/codegroup]
Moreover, if you’re still facing any issues, you can visit Github repository.
I hope, you loved this article, don’t forget to share it with your friends on below social media.
