Vue.js Loading Spinner Overlay Animation Using vue-spinner Library in Javascript Full Example For Beginners

You are currently viewing Vue.js Loading Spinner Overlay Animation Using vue-spinner Library in Javascript Full Example For Beginners
  • Post author:
  • Post category:Vue
  • Post comments:0 Comments

 

Welcome folks today in this blog post we will be building a loading spinner overlay animation using vue-spinner library in vue.js using javascript. All the full source code of the application is shown below.

 

 

Get Started

 

 

In order to get started you need to install the below library using the npm command as shown below

 

Usage

Vue Spinner on npm

npm install vue-spinner

 

 

For all the images and javascript files you can download the full github repository as shown below

 

DOWNLOAD SOURCE CODE

 

After downloading it the directory structure will look something like this

 

 

 

CommonJS

var PulseLoader = require('vue-spinner/src/PulseLoader.vue');

new Vue({
  components: {
    'PulseLoader': PulseLoader
  }
})

ES6

import PulseLoader from 'vue-spinner/src/PulseLoader.vue'

new Vue({
  components: {
    PulseLoader
  }
})

Or:

Vue.component('pulse-loader', require('vue-spinner/src/PulseLoader.vue'));

For browserify

If you use browserify + vueify, you may need to import vue-spinner like this:

var PulseLoader= require('vue-spinner/dist/vue-spinner.min').PulseLoader;
import { PulseLoader } from 'vue-spinner/dist/vue-spinner.min.js'

explain here

Browser globals

The dist folder contains vue-spinner.js and vue-spinner.min.js with all components exported in the window.VueSpinner object. These bundles are also available on NPM packages.

<script src="path/to/vue.js"></script>
<script src="path/to/vue-spinner.js"></script>
<script>
  var PulseLoader = VueSpinner.PulseLoader
</script>

Local setup

npm install
npm run dev

 

 

Usage

<pulse-loader :loading="loading" :color="color" :size="size"></pulse-loader>
<grid-loader :loading="loading" :color="color" :size="size"></grid-loader>
<clip-loader :loading="loading" :color="color" :size="size"></clip-loader>
<rise-loader :loading="loading" :color="color" :size="size"></rise-loader>
<beat-loader :loading="loading" :color="color" :size="size"></beat-loader>
<sync-loader :loading="loading" :color="color" :size="size"></sync-loader>
<rotate-loader :loading="loading" :color="color" :size="size"></rotate-loader>
<fade-loader :loading="loading" :color="color" :height="height" :width="width"></fade-loader>
<pacman-loader :loading="loading" :color="color" :size="size"></pacman-loader>
<square-loader :loading="loading" :color="color" :size="size"></square-loader>
<scale-loader :loading="loading" :color="color" :height="height" :width="width"></scale-loader>
<skew-loader :loading="loading" :color="color" :size="size"></skew-loader>
<moon-loader :loading="loading" :color="color" :size="size"></moon-loader>
<ring-loader :loading="loading" :color="color" :size="size"></ring-loader>
<bounce-loader :loading="loading" :color="color" :size="size"></bounce-loader>          
<dot-loader :loading="loading" :color="color" :size="size"></dot-loader>

 

 

 

 

Vue Loading Overlay Spinner Demo

 

 

Full Vue.js Example

 

 

<template>
<div class="v-spinner" v-show="loading">
    <div class="v-beat v-beat-odd" v-bind:style="spinnerStyle">
    </div><div class="v-beat v-beat-even" v-bind:style="spinnerStyle">
    </div><div class="v-beat v-beat-odd" v-bind:style="spinnerStyle">
    </div>
  </div>
</template>

<script>
export default {
  
  name: 'BeatLoader',
  props: {
    loading: {
      type: Boolean,
      default: true
    },
    color: { 
      type: String,
      default: '#5dc596'
    },
    size: {
      type: String,
      default: '15px'
    },
    margin: {
      type: String,
      default: '2px'
    },
    radius: {
      type: String,
      default: '100%'
    }
  },
  data () {
    return {
      spinnerStyle: {
        backgroundColor: this.color,
        height: this.size,
            width: this.size,
        margin: this.margin,
        borderRadius: this.radius
      }
    }
  }
}
</script>

<style>
.v-spinner .v-beat
{
    -webkit-animation: v-beatStretchDelay 0.7s infinite linear;
            animation: v-beatStretchDelay 0.7s infinite linear;
    -webkit-animation-fill-mode: both;
              animation-fill-mode: both;
    display: inline-block;         
}
.v-spinner .v-beat-odd
{
  animation-delay: 0s;
}
.v-spinner .v-beat-even
{
  animation-delay: 0.35s;
}
@-webkit-keyframes v-beatStretchDelay
{
    50%
    {
        -webkit-transform: scale(0.75);
                transform: scale(0.75);
        -webkit-opacity: 0.2;             
                opacity: 0.2;
    }
    100%
    {
        -webkit-transform: scale(1);
                transform: scale(1);
        -webkit-opacity: 1;             
                opacity: 1;
    }
}
@keyframes v-beatStretchDelay
{
    50%
    {
        -webkit-transform: scale(0.75);
                transform: scale(0.75);
        -webkit-opacity: 0.2;             
                opacity: 0.2;
    }
    100%
    {
        -webkit-transform: scale(1);
                transform: scale(1);
        -webkit-opacity: 1;             
                opacity: 1;
    }
}
</style>

 

Leave a Reply