Spinner 不工作 vue.js

Question

I use this package: https://github.com/greyby/vue-spinner for showing a spinner.

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

<script>

import { PulseLoader } from 'vue-spinner/dist/vue-spinner.min.js';

export default {

  components: { PulseLoader },

  data () {
    return {
      loading: true,
      color: "black",
      size: "10"
    }
  }
}
</script>

For some reason the spinner is not showing???!?! There are no erros in my console!

Answer 1

You should not be importing from the dist folder.

Please, try importing the vue component source, doing as shown in the documentation:

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

Docs: https://github.com/greyby/vue-spinner#es6

---

UPDATE :

Considering Browserify restriction on applying transforms in files inside node_modules , then you could try the code snippet provided in the mentioned GitHub issue :

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

Answer 2

The website I was working on had a custom CSS-file. It was missing the correct styles. Possibly because it was for an older version of Bootstrap.

Make sure that there is a definition for .spinner-border anywhere in your styles. If not, find out why not and fix it.

I have copied the style from the source-code of the Vue examples page for a quick fix.

@keyframes spinner-border {
  to { transform: rotate(360deg); }
}

.spinner-border {
    display: inline-block;
    width: 2rem;
    height: 2rem;
    vertical-align: text-bottom;
    border: .25em solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    -webkit-animation: spinner-border .75s linear infinite;
    animation: spinner-border .75s linear infinite;
}