Vue JavaScript HTML CSS
Switch branches/tags
Nothing to show
Clone or download
Latest commit 1750fdf Oct 7, 2017
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 update README May 2, 2017
index.html update 增加loader title 提示 Aug 31, 2017
package.json bump to 1.0.3 Oct 7, 2017 init Dec 19, 2015 init Dec 19, 2015
webpack.config.js init Dec 19, 2015


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



$ npm install vue-spinner


var PulseLoader = require('vue-spinner/src/PulseLoader.vue');

new Vue({
  components: {
    'PulseLoader': PulseLoader


import PulseLoader from 'vue-spinner/src/PulseLoader.vue'

new Vue({
  components: {


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>
  var PulseLoader = VueSpinner.PulseLoader

Local setup

npm install
npm run dev


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



vue-spinner is licensed under The MIT License.