Vue JavaScript HTML CSS
Switch branches/tags
Nothing to show
Clone or download
Latest commit 1750fdf Oct 7, 2017
Permalink
Failed to load latest commit information.
dist bump to 1.0.3 Oct 7, 2017
example finish pacman and grid loader Dec 28, 2015
src remove wrong prop setup Sep 21, 2016
.gitignore init Dec 19, 2015
LICENSE init Dec 19, 2015
README.md update README May 2, 2017
index.html update 增加loader title 提示 Aug 31, 2017
package.json bump to 1.0.3 Oct 7, 2017
webpack.build.js init Dec 19, 2015
webpack.build.min.js init Dec 19, 2015
webpack.config.js init Dec 19, 2015

README.md

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.