nguyenvanduocit / vue-loading-spinner Goto Github PK
View Code? Open in Web Editor NEWJust another collection of loading spinners with Vue.js, alot of spinners
Home Page: https://nguyenvanduocit.github.io/vue-loading-spinner/
Just another collection of loading spinners with Vue.js, alot of spinners
Home Page: https://nguyenvanduocit.github.io/vue-loading-spinner/
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
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
I cannot find any info on how these are licensed. Would you please add a document clarifying?
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
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');
},
How can the color of 'HourGlass' be changed?
'' seems not to be working.
is repo still maintaining? If not managed, i want to fork.
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);
I could import and use pencil, plane, circle9 in the same way. But what I did for ThreeDots did not happen unfortunately.
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!
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
: 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
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?
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!
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)
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.
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:
Did you forget to run npm install --save for it?
Listening at http://localhost:8080
How can i change the color of the spinner?
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>?
Hello, it´s a question this loading spinner have support for vuejs 2.X? ty for the information
: 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
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
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.
in my project -- App.vue
`
Hello,
when i tried imported CubeGrid, it don't work.
Other components are working normally.
Att
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
sovled
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.
Can't change color of RotateSquare2. Source code exposes prop "background" but it seem to be ignored.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.