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
npm install vue-simple-spinner --save
OR
# Using YARN
yarn add vue-simple-spinner
Usage of Vue.js Loading Spinner Example
Now, let’s import it in our entry point of the application.
/src/main.js
import Spinner from 'vue-simple-spinner'
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.
Vue.component('vue-simple-spinner', Spinner)
Finally, let’s use it in template file by just putting a single line of code.
/src/App.vue
<vue-simple-spinner></vue-simple-spinner>
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 Spinner3>
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.
<vue-simple-spinner size="tiny" message="Loading..."></vue-simple-spinner>
It could be number as well to customize in the size.
<vue-simple-spinner size="55"></vue-simple-spinner>
2. Line options of Vue Spinner
Also, you can change the size of the line for your spinner.
<vue-simple-spinner line-size="7"></vue-simple-spinner>
Also, you can change the foreground and background color of the line of spinner.
<vue-simple-spinner line-fg-color="#009900" line-bg-color="#555555"></vue-simple-spinner>
3. Speed and Spacing of Vue Spinner
Also, you can customize the speed of the vue spinner by using a speed property.
<vue-simple-spinner speed="0.4"></vue-simple-spinner>
Here, you can modify the spacing between the message and the spinner.
<vue-simple-spinner spacing="15" message="I'm 55px below the vue-simple-spinner"></vue-simple-spinner>
4. Message options of Vue Spinner
Impotantly, you can change the font of the messaged that you wanna show with the vue spinner.
<vue-simple-spinner font-size="20" message="I'm a 20px font size"></vue-simple-spinner>
Also, you can change the color of message as per your UI need.
<vue-simple-spinner text-fg-color="#009900" message="I'm #009900 green!"></vue-simple-spinner>
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.
//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: '<App/>', components: { App } })
<template> <div id="app"> <vue-simple-spinner></vue-simple-spinner> <vue-simple-spinner message="Loading.." text-fg-color="#009900"></vue-simple-spinner> <vue-simple-spinner size="tiny"></vue-simple-spinner> </div> </template> <script> export default { name: 'app' } </script>
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.
Leave a Reply