Easy-Peasy Vue.js Loading Spinner Example

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 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.

<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.