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>
Visit GitHub for more.