nguyenvanduocit / vue-loading-spinner

Just another collection of loading spinners with Vue.js, alot of spinners

vue-loading-spinner

Just another collection of loading spinners with Vue.js

Installation

npm install --save vue-loading-spinner

or

yarn add vue-loading-spinner

Usage

<template>
  <div id="app">
    <rotate-square2></rotate-square2>
  </div>
</template>

<script>
  import {RotateSquare2} from 'vue-loading-spinner'
  export default {
    components: {
      RotateSquare2
    }
  }
</script>

Demo

List of all spinner: Demo

Development Setup

Checkout branch develop

vue-loading-spinner's Issues

Parse error on 'import' when used within a component-based project

Getting the following error when attempting to use in a component-based project with a Vueify build process:

/path/to/project/node_modules/vue-loading-spinner/src/index.js:1
import Circle from './components/Circle.vue'
^
ParseError: 'import' and 'export' may appear only with 'sourceType: module'

Imported in my project's main.js like so:

import {Hexagon} from 'vue-loading-spinner'
Vue.component('hexagon-loading-spinner', Hexagon)

sovled

sovled

Unable to use

How to add this package to this laravel vuejs template that im using for my project.

https://github.com/cretueusebiu/laravel-vue-spa

I tried to follow your instructions to install and have this on the layout vue component

<template>
  <div class="basic-layout d-flex align-items-center justify-content-center m-0 bg-white">
    <rotate-square2></rotate-square2>
    <child/>
  </div>
</template>

<script>
import { RotateSquare2 } from 'vue-loading-spinner'
export default {
  name: 'BasicLayout',
  components: {
      RotateSquare2
    }
}
</script>

<style lang="scss">
.basic-layout {
  color: #636b6f;
  height: 100vh;
  font-weight: 100;
  position: relative;

  .links > a {
    color: #636b6f;
    padding: 0 25px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .1rem;
    text-decoration: none;
    text-transform: uppercase;
  }
}
</style>

But i get a huge error when i run npm run watch. I cannot copy the error code as it is too huge, but here is the snapshot https://ibb.co/nxsvYJ
Any help is appreciated.

how install using browserify?

Title says all. i'm not using webpack

If i import using browserify way i got:

build.js:3913 Uncaught SyntaxError: Unexpected end of input

Using gulp+browserify, vueify and another transformers.

How i can fix that?

thanks!

Mikepad (and other spinners) not defined

I have installed everything according to the readme, and some spinners (i.E. RotateSquare2) are working fine.

But with Mikepad I get this error:
Uncaught ReferenceError: Mikepad is not defined

How to center on a screen and set z-index?

Pretty awesome, how to have responsive div at the center and set z-index? Sorry not good on CSS.

this is my work around

position: fixed;
        top: 50%;
        left: 50%;
        margin-top: -80px;
        margin-left: -60px;

        z-index: 1001;

Don

ReferenceError: Unknown plugin "transform-runtime"

I install the plugin without any problem, but when I try to use it in my project, console throws me the following error:

Module build failed: ReferenceError: Unknown plugin "transform-runtime" specified in...

I'm doing like this:

import {CubeSpin} from 'vue-loading-spinner';
Vue.use(CubeSpin);

Can't show spinner while main component is loading

I want add preloader on main page. i add spinner and want to see while main component is loading on the page. But spiner doesn't appers. It's appears only if I add steTimeOut in mounted()
How can I check if component is loading completly ?
Here is my code
toolbar.vue

<v-toolbar 
         v-show="!loading"
        clipped-left class="top-menu" style="z-index: 10">... </v-toolbar>
   <div 
        style="position: absolute; z-index: 4; margin: 0 auto; top: 64px; width: 100%">
            <main_search 
            @loaded="loaded"
           v-show="!loading"
             v-if="main_search"></main_search>
            <card v-if="show_card" :change="get_change_card"></card>
        </div>
        <rotate-square2 
        style="position: fixed; top: 50%; left: 50%; width: 80px; height: 80px;"
        v-if="loading"></rotate-square2>
</template>

<script>
 import {RotateSquare2} from 'vue-loading-spinner';

    export default {
        props: [],
        components: {
            main_search,
            card,
            RotateSquare2
        },
        data: () => ({
            loading: true,

And another component
search.vue

mounted() {
 this.$emit('loaded');
    },

License and coreui relationship

Seeing that you have recent activity, I can only assume you are alive and well, and just a bad maintainer. There are multiple issues about adding a license to this snippet collection of spinners, issues that you've ignored.

About the CubeGrid spinner:
I'm not interested in that, but I'm interested in knowing if the spinners have been extracted from coreui (https://coreui.io/docs/2.1/components/spinners/) or not / or if they (ha ha) got them from you?

Thank you.

Addon: maintainers of open-source projects do not have an obligation to use their time on supporting the micro communities they're building, but not responding to multiple license inquires is a plain insult to this field of work we're in.

Different color

How can i change the color of the spinner?

Is there any development documentation？

Is there any development document?
I want to use it in my own project, but I find it doesn't work. I want to add this loading effect when the pop-up window appears.
Or add more custom variables, can be like some UI component loading components, whether to customize local display or global display

: Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.

vue-loading-spinner/src/components/Circle.vue

Line 73 in c083827

stroke-dashoffset: $offset/4;

: Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($offset, 4) or calc($offset / 4)

More info and automated migrator: https://sass-lang.com/d/slash-div

Add LICENSE

I cannot find any info on how these are licensed. Would you please add a document clarifying?

What license is this code released under?

Things that you create and don't specify a license for, are automatically copyrighted to you - and not re-usable by others without explicit permission.

As far as I can see, there's no license specified for this repository, so anyone who wants to use it would need to get permission directly from you for each use.

Is this intentional? If not, you should specify the license, so others can use it.

ThreeDots is not available, do you think there's a problem?

I could import and use pencil, plane, circle9 in the same way. But what I did for ThreeDots did not happen unfortunately.

can no install, python version error, node-sass

I have the next issue al run npm install

npm WARN deprecated [email protected]: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated [email protected]: this library is no longer supported
npm WARN deprecated [email protected]: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated [email protected]: See https://github.com/lydell/source-map-resolve#deprecated
npm WARN deprecated [email protected]: Chokidar 2 does not receive security updates since 2019. Upgrade to chokidar 3 with 15x fewer dependencies
npm WARN deprecated [email protected]: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
npm WARN deprecated [email protected]: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
npm WARN deprecated [email protected]: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated [email protected]: This version of tar is no longer supported, and will not receive security updates. Please upgrade asap.
npm ERR! code 1
npm ERR! path /mnt/c/Users/berri/projects/foro4/foro4/node_modules/node-sass
npm ERR! command failed
npm ERR! command sh -c node scripts/build.js
npm ERR! Building: /home/jesus/.nvm/versions/node/v16.14.2/bin/node /mnt/c/Users/berri/projects/foro4/foro4/node_modules/node-gyp/bin/node-gyp.js rebuild --verbose --libsass_ext= --libsass_cflags= --libsass_ldflags= --libsass_library=
npm ERR! gyp info it worked if it ends with ok
npm ERR! gyp verb cli [
npm ERR! gyp verb cli   '/home/jesus/.nvm/versions/node/v16.14.2/bin/node',
npm ERR! gyp verb cli   '/mnt/c/Users/berri/projects/foro4/foro4/node_modules/node-gyp/bin/node-gyp.js',
npm ERR! gyp verb cli   'rebuild',
npm ERR! gyp verb cli   '--verbose',
npm ERR! gyp verb cli   '--libsass_ext=',
npm ERR! gyp verb cli   '--libsass_cflags=',
npm ERR! gyp verb cli   '--libsass_ldflags=',
npm ERR! gyp verb cli   '--libsass_library='
npm ERR! gyp verb cli ]
npm ERR! gyp info using [email protected]
npm ERR! gyp info using [email protected] | linux | x64
npm ERR! gyp verb command rebuild []
npm ERR! gyp verb command clean []
npm ERR! gyp verb clean removing "build" directory
npm ERR! gyp verb command configure []
npm ERR! gyp verb check python checking for Python executable "C:\Python27\python.exe" in the PATH
npm ERR! gyp verb `which` failed Error: not found: C:\Python27\python.exe
npm ERR! gyp verb `which` failed     at getNotFoundError (/mnt/c/Users/berri/projects/foro4/foro4/node_modules/which/which.js:13:12)
npm ERR! gyp verb `which` failed     at F (/mnt/c/Users/berri/projects/foro4/foro4/node_modules/which/which.js:68:19)
npm ERR! gyp verb `which` failed     at E (/mnt/c/Users/berri/projects/foro4/foro4/node_modules/which/which.js:80:29)
npm ERR! gyp verb `which` failed     at /mnt/c/Users/berri/projects/foro4/foro4/node_modules/which/which.js:89:16
npm ERR! gyp verb `which` failed     at /mnt/c/Users/berri/projects/foro4/foro4/node_modules/isexe/index.js:42:5
npm ERR! gyp verb `which` failed     at /mnt/c/Users/berri/projects/foro4/foro4/node_modules/isexe/mode.js:8:5
npm ERR! gyp verb `which` failed     at FSReqCallback.oncomplete (node:fs:198:21)
npm ERR! gyp verb `which` failed  C:\Python27\python.exe Error: not found: C:\Python27\python.exe
npm ERR! gyp verb `which` failed     at getNotFoundError (/mnt/c/Users/berri/projects/foro4/foro4/node_modules/which/which.js:13:12)
npm ERR! gyp verb `which` failed     at F (/mnt/c/Users/berri/projects/foro4/foro4/node_modules/which/which.js:68:19)
npm ERR! gyp verb `which` failed     at E (/mnt/c/Users/berri/projects/foro4/foro4/node_modules/which/which.js:80:29)
npm ERR! gyp verb `which` failed     at /mnt/c/Users/berri/projects/foro4/foro4/node_modules/which/which.js:89:16
npm ERR! gyp verb `which` failed     at /mnt/c/Users/berri/projects/foro4/foro4/node_modules/isexe/index.js:42:5
npm ERR! gyp verb `which` failed     at /mnt/c/Users/berri/projects/foro4/foro4/node_modules/isexe/mode.js:8:5
npm ERR! gyp verb `which` failed     at FSReqCallback.oncomplete (node:fs:198:21) {
npm ERR! gyp verb `which` failed   code: 'ENOENT'
npm ERR! gyp verb `which` failed }
npm ERR! gyp ERR! configure error
npm ERR! gyp ERR! stack Error: Can't find Python executable "C:\Python27\python.exe", you can set the PYTHON env variable.
npm ERR! gyp ERR! stack     at PythonFinder.failNoPython (/mnt/c/Users/berri/projects/foro4/foro4/node_modules/node-gyp/lib/configure.js:484:19)
npm ERR! gyp ERR! stack     at PythonFinder.<anonymous> (/mnt/c/Users/berri/projects/foro4/foro4/node_modules/node-gyp/lib/configure.js:406:16)
npm ERR! gyp ERR! stack     at F (/mnt/c/Users/berri/projects/foro4/foro4/node_modules/which/which.js:68:16)
npm ERR! gyp ERR! stack     at E (/mnt/c/Users/berri/projects/foro4/foro4/node_modules/which/which.js:80:29)
npm ERR! gyp ERR! stack     at /mnt/c/Users/berri/projects/foro4/foro4/node_modules/which/which.js:89:16
npm ERR! gyp ERR! stack     at /mnt/c/Users/berri/projects/foro4/foro4/node_modules/isexe/index.js:42:5
npm ERR! gyp ERR! stack     at /mnt/c/Users/berri/projects/foro4/foro4/node_modules/isexe/mode.js:8:5
npm ERR! gyp ERR! stack     at FSReqCallback.oncomplete (node:fs:198:21)
npm ERR! gyp ERR! System Linux 4.4.0-19041-Microsoft
npm ERR! gyp ERR! command "/home/jesus/.nvm/versions/node/v16.14.2/bin/node" "/mnt/c/Users/berri/projects/foro4/foro4/node_modules/node-gyp/bin/node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="
npm ERR! gyp ERR! cwd /mnt/c/Users/berri/projects/foro4/foro4/node_modules/node-sass
npm ERR! gyp ERR! node -v v16.14.2
npm ERR! gyp ERR! node-gyp -v v3.8.0
npm ERR! gyp ERR! not ok
npm ERR! Build failed with error code: 1

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/jesus/.npm/_logs/2022-05-29T20_31_34_535Z-debug-0.log```

In base a [this](https://stackoverflow.com/questions/45801457/node-js-python-not-found-exception-due-to-node-sass-and-node-gyp) stackoverflow issue, yuo are using the version of node-sass 4.5.3 that use python 2.
Yes, is possible install and change the path of python to the version 3, but like a developer is uncomfortable.
My recomedation is update node-sass to the lastes version

Not found error

I am seeing the following, any suggestions for what I might be doing wrong?

Thank you

WARNING in ./src/main.js
13:8-16 "export 'CubeSpin' was not found in 'vue-loading-spinner'
@ ./src/main.js
@ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

Isn't this managed anymore?

@nguyenvanduocit

is repo still maintaining? If not managed, i want to fork.

it´s a dude

Hello, it´s a question this loading spinner have support for vuejs 2.X? ty for the information

Cube amination not working

Bug

Cube not animated here.

Attach screen shots

Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($offset, 4)

More info and automated migrator: https://sass-lang.com/d/slash-div

   ╷
73 │     stroke-dashoffset: $offset/4;
   │                        ^^^^^^^^^
   ╵

node_modules/vue-loading-spinner/src/components/Circle.vue 73:24  root stylesheet

How to change color / props not assigned correctly

Currently I'm using this code to overwrite the color of the spinner

  .spinner::after {
      background: #c7254e !important;
  }

Looking at the source code I recognized that the component has the prop background for that

...
  props: {
    background: {
      default: '#41b883'
    },
...

So I assume the background could be set like this

<rotate-square2 background="#abcdef"></rotate-square2>

But this property is never used in the css of the component

    &:after {
      content: '';
      width: 100%;
      height: 100%;
      background: #41b883;
      animation: rotate-square-2-animate .5s linear infinite;
      position: absolute;
      bottom:40%;
      left: 0;
      border-radius: 3px;
    }

Am I doing something wrong?
Is this the intended behavior or an error?

Error in parsing SVG: Unbound namespace prefix: "v-bind"

Hey guys,

I know, this repo is not maintained anymore, but maybe you can help me anyways.

I built a vue.js app with parcel bundler in which im using this vue-loading-spinner component.
When I run npm run build I get this error in console:
node_modules/vue-loading-spinner/src/components/Circle.vue: Error in parsing SVG: Unbound namespace prefix: "v-bind" Line: 0 Column: 157 Char: >

Maybe you have any idea where this is coming from, thank you!

Not found CubeGrid in 'vue-loading-spinner'

Hello,

when i tried imported CubeGrid, it don't work.

Other components are working normally.

Att

RotateSquare2 background property not working

Can't change color of RotateSquare2. Source code exposes prop "background" but it seem to be ignored.

error: Unexpected token export

yarn add vue-loading-spinner
import Spinners from 'vue-loading-spinner';

chrome dev tools an error occurred when webpack dev server start:
Unexpected token export

Dependency error with node-sass

This dependency was not found in node_modules

Hi there,

I'm getting this error. Offcourse, installed with --save option;

ERROR Failed to compile with 1 errors

This dependency was not found in node_modules:

• vue-loading-spinner/components/Cube

Did you forget to run npm install --save for it?

Listening at http://localhost:8080

HourGlass: change color

How can the color of 'HourGlass' be changed?

'' seems not to be working.

error:To install it, you can run: npm install --save vue-loading-spinner/components/Cube

in my project -- App.vue
`

<script> import CubeSpin from 'vue-loading-spinner/components/Cube' export default { data () { return {} }, components: { CubeSpin } } </script>`

Can I use vue-loading-spinner `<script>`

Hi, I found this is great and I really want use this.

But I'm not good at front-end stuff, so I don't use NPM.

I tried it like this, https://jsbin.com/nokaruyela/9/edit?html,js,console,output

But it doesn't work.

How can I use the vue-loading-spinner with simiple <script>?