It looks like in your demo you have box-sizing: border-box set globally to all elements which I don't have, so for me the MoonLoader is pretty broken. When I'm adding it to .v-spinner .v-moon3 in my code, then it works. Just wanted you to know

I included this package in my Meteor app and turns out UglifyJS2 (that is used by Meteors minifying package ) fails to minify it. Resulting in an very hard to debug error "ReferenceError: xo is not defined". I haven't had the chance to investigate exactly what it is that fails. I just included the spinner template that I need directly in my app instead and it works.

Part of the minified code that fails was: .registered.innerWidth=xo("width",!0),yo.Normalizations.registered.innerHeight=xo("height",!0),yo.Normalizations

Mentioning it here in case someone getting a similar error since I had to remove packages one by one until I found what caused the error.

你在 index.js 中打包成一个 VueSpinner 让我调用其中的某一个组件非常不方便，为什么不考虑直接返回可调用的组件合集呢？

FYI, Using default configuration except for color, pacman just stays there without animation.

Running vue 2.5.11 with latest version of your library

I have the following error when running npm run dev.

Error: "extract-text-webpack-plugin" loader is used without the corresponding plugin, refer to https://github.com/webpack/extract-text-webpack-plugin for the usage example at Object.module.exports.pitch @ ./~/vue-spinner/src/PulseLoader.vue

• Windows 7
• node v4.4.7
• Vue 2

建议整合成一个组件，通过type类型不同来区分，比如type=plus就加载定义好的plus组件

Currently the README mentions that this library is officially not supported in Vue 2.
Let's upgrade it!

How to add loading spinner in button?

I'm getting the below error when trying to import any of the loaders. I've tried to create my own components with the same contents and that works fine.

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

[12:38:54] gulp-notify: [Laravel Elixir] Browserify Failed!: Unexpected token

/Users/user/projects/vue-project/node_modules/vue-spinner/src/PulseLoader.vue:1
<template>
^
ParseError: Unexpected token

I want to realize the loading shows when ajax request occurred but close when get ajax response. Vue-spinner is beautiful but I can't find the document to control the spinner switch.Also, options config is not friendly.Is there any solution? Thank you very much!

pacman-loader with size 40px:

pacman-loader with size 20px:

Thanks for these awesome loaders anyway ! 👍

What's the right way to configure jest when using vue-spinner package. After adding the package, tests fail with this:
` Jest encountered an unexpected token

This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.

By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".

Here's what you can do:
 • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
 • If you need a custom transformation specify a "transform" option in your config.
 • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

You'll find more details and examples of these config options in the docs:
https://jestjs.io/docs/en/configuration.html`

Tried the suggestions there but no success. My current jest config file:
{ "preset": "jest-puppeteer", "testRegex": "./new-e2e/.*.js$" }

Please renew it ^^
great works !

There are missing percentages in RiseLoader.vue at 25% (first occurence at line 88)

Also at scale loader there should not be comma after 0% breakpoint (lines 100, 121)

Minifier shows unnecesary warnings because of this.

Hi,
I'm using vue-resource and I'd like to use vue-spinner inside interceptors to show/hide the spinner on any ajax request. I don't know if it's possible to reference a vue-spinner component inside the interceptor. I have done the following but with no success: (I'm using vueify)

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

Vue.http.interceptors.push((request, next) => {
    this.loading = true;
   next((response) => {
        this.loading = false;
    });
});

new Vue({
    el: '#grid-manager',
   components: { 'pulse-loader': PulseLoader},

  ....and in the root vue instance i have:

<pulse-loader :loading="loading" :color="color" :size="size"></pulse-loader>

Thanks!

Why bundle css-loader and style-loader inside the vue-spinner.js? If you remove these dependencies, the final bundle would be much smaller.

Please add this to your documentation. I thought there was a problem in implementing but after I read the issues and found out that it doesn't really work in Vue.js 2.0. Nice project anyway and I hope you will support Vue.js 2.0. TY

• Usage does not explain what values to those attributes
• Does not know what are the default values to those attributes
• loading is this string? or some sort of message?
• what are the available colors? does it accepts anything? such as rgba, hex or color names
• what are the available sizes? can we use sm, md, lg and so? or does the available codes are small, mediuim, large?

ScaleLoader ignore size prop

<scale-loader size="20px" />

This issue is fixed in master:

vue.esm.js?65d7:434 [Vue warn]: The data property "radius" is already declared as a prop. Use prop default value instead.

found in

---> <FadeLoader> at node_modules/vue-spinner/src/FadeLoader.vue

... please release a new version, so I don't have to rely on master

Is there any way to add custom animation or custom css shape ?

<clip-loader :style="myStyle"></clip-loader>

Ideally, the color needs to be set by CSS and the same goes for size.

For example, I want to create a spinner that shows inline next to the explanatory text. Because I can only specify the spnner's height through the height prop, I lose control of the spinner's appearance if I ever apply different CSS. This is a maintenance nightmare.

The same goes for color: If I want the text and spinner to have the same color, I have to keep on duplicating the color entry in the CSS and the color prop.

I see open issues since up to 5 years ago. Is it safe to assume that my complaint will go unheard? Hopefully not, but I won't wait standing.

Inline style in Safari and Chrome:

Safari

<div class="v-clip" style="background-color: transparent !important; border-top-left-radius: 100%; border-top-right-radius: 100%; border-bottom-right-radius: 100%; border-bottom-left-radius: 100%; border: 2px solid; width: 35px; height: 35px; background-position: initial initial !important; background-repeat: initial initial !important;"></div>

Chrome

<div class="v-clip" style="height: 35px; width: 35px; border-width: 2px; border-style: solid; border-color: rgb(93, 197, 150) rgb(93, 197, 150) transparent; border-radius: 100%; background: transparent !important;">
</div>

In Safari , the style lost border-color. Just working to find why.

It would be helpful to add the names of the spinners to the live demo so that I know more easily which one to import.