[Vuejs]-Spinner not working vue.js

by

3👍

✅

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;
👤J. Bruni

1👍

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;
}
👤Chris

Leave a comment