vue-spinner 0,2 npm webpack

vue spinners

3 years after

vue-spinner

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
  }
})

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 = VueStrap.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.

Related Repositories

vue-model

vue-model

Model component for Vue.js ...

vue-recyclist

vue-recyclist

Infinite scroll list for Vue.js with DOM recycling. ...

awesome-vue

awesome-vue

A curated list of awesome things related to Vue.js ...

awesome-vue

awesome-vue

A curated list of awesome things related to Vue.js ...

awesome-vue

awesome-vue

A curated list of awesome things related to Vue.js ...


Top Contributors

greyby fntneves

Dependencies

package version
dev vue ^1.0.12
babel-core ^6.1.21
babel-loader ^6.1.0
babel-plugin-transform-runtime ^6.1.18
babel-preset-es2015 ^6.1.18
babel-runtime ^5.8.0
css-loader ^0.21.0
style-loader ^0.13.0
stylus-loader ^1.4.0
vue-hot-reload-api ^1.2.0
vue-html-loader ^1.0.0
vue-loader ^7.2.0
webpack ^1.12.2
webpack-dev-server ^1.12.0
extract-text-webpack-plugin ^0.8.2

Releases

-   v1.0.1 zip tar