🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

Yet another collection of 20+ loading indicators / loading spinners for Vue.js applications.

Loading

Documentation

vue-spinner

Not support Vue 2.0.

A collection of loading spinners with Vue.js. Just convert yuanyan's React.js project Halogen to Vue.js components. Special thanks to yuanyan for the wonderful project.

Live demo

Installation

NPM

$ npm install vue-spinner

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>

You can customize the color and size with setting the props. All props have default value. You can control the spinner show/hidden with setting the loading prop.

TODO

License

vue-spinner is licensed under The MIT License.


You May Also Like