Vue.js Spinners Examples

vue-spinners

A collection of loading spinners with Vue.js. Based on yuanyan's React.js project Halogen converted to use Vue.js components. S

Example

Installation

via NPM

npm install vue-spinner

Import the spinners you want to:

<script>
import PulseLoader from 'vue-spinner/src/PulseLoader.vue'
import RingLoader from 'vue-spinner/src/RingLoader.vue'
import BounceLoader from 'vue-spinner/src/BounceLoader.vue'

export default {
  data () {
    return {
      color: '#cc181e',
      color1: '#5bc0de',
      size: '45px',
      margin: '2px',
      radius: '2px'
    }
  },
  components: {
    PulseLoader,
    RingLoader,
    BounceLoader
  }
}
</script>

Bind to the options to change color, size and display

<template>
  <div class="container">
    <pulse-loader :loading="loading" :color="color" :size="size"></pulse-loader>
    <ring-loader :loading="loading" :color="color1" :size="size"></ring-loader>
    <bounce-loader :loading="loading" :color="color" :size="size"></bounce-loader>
  </div>
</template>

Live demo

Visit GitHub for more.