greyby / vue-spinner Goto Github PK
View Code? Open in Web Editor NEWvue spinners
License: MIT License
vue spinners
License: MIT License
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
建议整合成一个组件,通过type类型不同来区分,比如type=plus
就加载定义好的plus组件
Currently the README mentions that this library is officially not supported in Vue 2.
Let's upgrade it!
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
FYI, Using default configuration except for color, pacman just stays there without animation.
Running vue 2.5.11 with latest version of your library
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.
vue-spinner/src/MoonLoader.vue
Line 28 in 1750fdf
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.
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!
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
Why bundle css-loader
and style-loader
inside the vue-spinner.js
? If you remove these dependencies, the final bundle would be much smaller.
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$" }
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.
Please renew it ^^
great works !
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.
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
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!
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
ScaleLoader ignore size
prop
<scale-loader size="20px" />
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.
How to add loading spinner in button?
你在 index.js 中打包成一个 VueSpinner 让我调用其中的某一个组件非常不方便,为什么不考虑直接返回可调用的组件合集呢?
Is there any way to add custom animation or custom css shape ?
<clip-loader :style="myStyle"></clip-loader>
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.