epicmaxco / epic-spinners Goto Github PK
View Code? Open in Web Editor NEWEasy to use css spinners collection with Vue.js integration
Home Page: https://epic-spinners.epicmax.co
License: MIT License
Easy to use css spinners collection with Vue.js integration
Home Page: https://epic-spinners.epicmax.co
License: MIT License
Hi, it looks like its not working with newest Vue version (2.5.17). In package.json there is a fixed version (2.5.16).
To replicate I used Nuxt v1.0 for example with adding this package. Until you will use vue version from nuxt (always the newest one) there will be this bug.
Thanks! Good work anyway!
Nice package.
Any plans on a SVG version?
Best!
On the gallary website, there are two errors in the source code displayed for the spinners. The Fulfilling Square and Fulfilling Bouncing Circle are swapped.
We might want to trim whatever's unecessary for epic-spinners. But we can also keep full release script, because why not.
Thinking of creating angular components for epic spinners. I can create a pull request and start working on it if that's okay
Should be similar to https://ui.vuestic.dev and https://admin.vuestic.dev.
While navigating using vue-router. Nothing special. A epic-spinner is put inside a button and is shown/hiden by using v-show or v-if (both have this bug)
vue.common.js:1741 DOMException: Failed to read the 'cssRules' property from 'CSSStyleSheet': Cannot access rules
at Object.appendKeyframes (webpack:///./node_modules/epic-spinners/src/services/utils.js?:4:39)
at VueComponent.updateAnimation (webpack:///./node_modules/epic-spinners/src/components/lib/SpringSpinner.vue?./node_modules/babel-loader/lib?%7B%22presets%22:%5B%22env%22%5D,%22plugins%22:%5B%22transform-object-rest-spread%22%5D%7D!./node_modules/vue-loader/lib/selector.js?type=script&index=0:83:23)
at VueComponent.mounted (webpack:///./node_modules/epic-spinners/src/components/lib/SpringSpinner.vue?./node_modules/babel-loader/lib?%7B%22presets%22:%5B%22env%22%5D,%22plugins%22:%5B%22transform-object-rest-spread%22%5D%7D!./node_modules/vue-loader/lib/selector.js?type=script&index=0:76:10)
at callHook (webpack:///./node_modules/vue/dist/vue.common.js?:2921:21)
at Object.insert (webpack:///./node_modules/vue/dist/vue.common.js?:4158:7)
at invokeInsertHook (webpack:///./node_modules/vue/dist/vue.common.js?:5960:28)
at VueComponent.patch [as __patch__] (webpack:///./node_modules/vue/dist/vue.common.js?:6179:5)
at VueComponent.Vue._update (webpack:///./node_modules/vue/dist/vue.common.js?:2670:19)
at VueComponent.updateComponent (webpack:///./node_modules/vue/dist/vue.common.js?:2788:10)
at Watcher.get (webpack:///./node_modules/vue/dist/vue.common.js?:3142:25)
ERROR Failed to compile with 21 errors10:09:33
output.js:103
error in ./src/components/lib/HollowDotsSpinner.vue
output.js:103
output.js:103
Module build failed: Error:
output.js:103
Vue packages version mismatch:
This is easily reproducible by using Nuxt.js starter application created with Vue cli:
$ vue init nuxt-community/starter-template <project-name>
Then add some of Epic Spinners in some page, pages/index.vue
is what I used for this Gits:
https://gist.github.com/bmarkovic/69c802d4eec12073b52a0aa37ee87606
Env | Version |
---|---|
Epic Spinners | 1.0.3 |
Vue.js | 2.5.16 |
Nuxt.js | 1.4.1 |
Webpack | 3.12.0 |
Babel | (core) |
Node.js | 10.5.0 |
NPM | 6.0.0. |
{ /home/bmarkovic/Devel/playground/nuxt-test/es-test/node_modules/epic-spinners/src/lib.js:1
(function (exports, require, module, __filename, __dirname) { import HollowDotsSpinner from './components/lib/Hollow
DotsSpinner.vue'
^^^^^^^^^^^^^^^^^
SyntaxError: Unexpected identifier
at new Script (vm.js:74:7)
at createScript (vm.js:246:10)
at Object.runInThisContext (vm.js:298:10)
at Module._compile (internal/modules/cjs/loader.js:670:28)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:713:10)
at Module.load (internal/modules/cjs/loader.js:612:32)
at tryModuleLoad (internal/modules/cjs/loader.js:551:12)
at Function.Module._load (internal/modules/cjs/loader.js:543:3)
at Module.require (internal/modules/cjs/loader.js:650:17)
at require (internal/modules/cjs/helpers.js:20:18)
at r (/home/bmarkovic/Devel/playground/nuxt-test/es-test/node_modules/vue-server-renderer/build.js:8330:16)
at Object.<anonymous> (server-bundle.js:3463:18)
at __webpack_require__ (webpack:/webpack/bootstrap 3290c2a33fe9c042eb37:25:0)
at Object.48 (pages/index.vue?d474:1:0)
at __webpack_require__ (webpack:/webpack/bootstrap 3290c2a33fe9c042eb37:25:0)
at Object.45 (pages/index.vue:1:0) statusCode: 500, name: 'SyntaxError' }
I have tried to debug and from what I've seen, the entry file gets wrapped in a
function (the signature is seen above) but not transpiled.
Another issue is that the syntax that gets passed on to "eval" (in this case Node's
vm.runInThisCotext
) has imports i.e. untranspiled top-level ES6 wrapped in a
function which AFAIK wouldn't be correct ES6 even if vm.runInThisCotext
could interpret
it.
When I manually import the transpiled module as:
const { HalfCircleSpinner } = require('epic-spinners/dist/lib/epic-spinners.min.js')
// or
import { HalfCircleSpinner } from 'epic-spinners/dist/lib/epic-spinners.min.js'
The spinner doesn't appear on the page, even if neither webpack nor Vue render complains.
Hello everyone. I started to use epic-spinners in my first Vue project and it works pretty good in FE and Chrome.
The problem is occuring in IE11, when I load the page that is using the spinner, it will throw an syntax error, expecting : in this part of the code.
The problem is probably that IE does not allow this sort of syntax and is expecting
spinnerStyle: function () {}
.
Is there some way to setup webpack to build it this way or how to fix this issue?
Hi!
I tried registering it globally, but to no avail.
What I tried was:
import { HollowDotsSpinner } from 'epic-spinners'
Vue.component('hollow-dots-spinner', {
components: {
HollowDotsSpinner
}
})
Vue.use(hollow-dots-spinner)
Also tried passing it as a value in new vue as well as components but to no avail. Didn't find anything about this in the docs, or did I miss something completely?
Thanks for any inputs here.
Anyway to use this with Vue.js 3?
https://unpkg.com/[email protected]/dist/lib/epic-spinners.min.js
a.options.__file="/Users/hrabouski/work/epic-spinners/src/components/lib/AtomSpinner.vue"
Hi! Thank you for this lib. I've imported your awesome spinner in my ts file and got this error:
31:40 Could not find a declaration file for module 'epic-spinners'. 'F:/work/dashboard/node_modules/epic-spinners/src/lib.js' implicitly has an 'any' type.
Trynpm install @types/epic-spinners
if it exists or add a new declaration (.d.ts) file containing `declare module 'epic-spinners'
is there any typing for you package ?
FulfillingBouncingCircleSpinner - Bootstrap shadow-lg
When adding on the Class shadow-lg from Bootstrap, the square background is showing.
NOTE: The background panel of the spinner to be a blue like color so you can see it.
Let me know for help to reproduce.
KyriakosMichael.
Example:
<FulfillingBouncingCircleSpinner
slot="board-item-slot"
class="offset-6 shadow-lg"
:size="50"
color="grey"
v-if="isLoading"
/>
Very nice spinnerzzz! ๐
I wonder, do you plan to add an optional property (or another mechanism) on the vue component, in order to make a spinner overlay its container that would then appear underneath (z-index, opacity) while the spinner runs? So to prevent a user action in that covered region meanwhile.
i can use npm run dev is ok , but i try to build is not work.
When npm build, i'm getting
ERROR in static/js/0.55e1a31d0eaa216bc664.js from UglifyJs
Unexpected character '`' [./node_modules/epic-spinners/src/services/utils.js:13,0][static/js/0.55e1a31d0eaa216bc664.js:1040,22]
Build failed with errors.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: `node build/build.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
Originally posted by @skapin in #17 (comment)
Some spinners import contain extra spaces which cause eslint errors. For example: Spring spinner and TrinityRingsSpinner
The LoopingRhombusesSpinner component is broken. There is a typo in the component on line 5, which currently reads :ikey="index"
when it should be :key="index"
. This bug is preventing the loader from properly rendering when my Vue app is compiled and published. It still works fine locally when running the vue serve
command using the vue cli.
The problem with epic-spinners landing is that at the moment it's extremely outdated. (you can't even update anything there, most of the dependencies are deprecated)
Right now we have 2 repos:
So what we want to do with it:
The "SpringSpinner" appears to be trying, and failing, to access a stylesheet on the document and the result are ugly JS errors on load.
The offending code seems to be inside of the SpringSpinner:
appendKeyframes: function (name, frames) {
var idx = document.styleSheets[0].cssRules.length
document.styleSheets[0].insertRule('@keyframes ' + name + ' { ' + frames + ' }', idx)
}
vue.runtime.esm.js?2b0e:601 [Vue warn]: Error in mounted hook: "SecurityError: Failed to read the 'cssRules' property from 'CSSStyleSheet': Cannot access rules"
found in
---> <SpringSpinner> at node_modules/epic-spinners/src/components/lib/SpringSpinner.vue
For unit tests i use Jest and vue-test-utils.
Test error:
FAIL src/components/ui/Preloader/Preloader.spec.ts
โ Test suite failed to run
/home/user/git/frontend/node_modules/epic-spinners/src/lib.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import HollowDotsSpinner from './components/lib/HollowDotsSpinner.vue'
^^^^^^
SyntaxError: Unexpected token import
at ScriptTransformer._transformAndBuildScript (node_modules/jest-cli/node_modules/jest-runtime/build/script_transformer.js:396:17)
at Object.<anonymous> (src/components/ui/Preloader/script.ts:1098:72)
Test code:
import { mount } from '@vue/test-utils'
import Preloader from './Preloader.vue'
let wrapper: any
describe('ui/Preloader.vue', () => {
beforeEach(() => {
wrapper = mount(Preloader, {
attachToDocument: true
})
})
it('should render correct contents', () => {
expect(wrapper.classes()).toContain('preloader')
expect(wrapper.find('.semipolar-spinner')).toBe(true)
expect(wrapper.findAll('.semipolar-spinner > div.ring').length).toBe(5)
})
})
Component wrapper template:
<template>
<div class="preloader">
<semipolar-spinner
:animation-duration="duration"
:size="size"
:color="color"
/>
</div>
</template>
I'm having issues when trying to add this collection into an existing project using browserify.
$ npm run build
> cross-env NODE_ENV=production browserify -g envify -p [ vueify/plugins/extract-css -o dist/build.css ] -e src/main.js | uglifyjs -c warnings=false -m > dist/build.js
/sitedir/node_modules/epic-spinners/dist/lib/epic-spinners.min.css:1
.hollow-dots-spinner[data-v-28280fa3],.hollow-dots-spinner ...
^
ParseError: Unexpected token
Any guidance?
Error with local component registration
Uncaught ReferenceError: require is not defined at ./node_modules/epic-spinners/dist/cjs/index.js
<template>
<div id="app">
<atom-spinner :animation-duration="1000" :size="60" color="#ff1d5e" />
</div>
</template>
<script>
import { AtomSpinner } from 'epic-spinners'
export default {
components: {
AtomSpinner,
},
}
</script>
But it works with global registration
import { HalfCircleSpinner } from 'epic-spinners'
cont app = createApp({});
app.component('half-circle-spinner', HalfCircleSpinner)
I was about to use the package served via CDN for a project when I realised the minification have issues in jsdelivr and seems to point to wrong file there.
Anyways, I tried using the file that's already in the repo's dist/lib
, but it doesn't expose the root object globally.
For a quick fix, I changed the output for webpack.lib.conf
from
output: {
path: config.lib.assetsRoot,
filename: utils.assetsLibPath('[name].min.js'),
library: '[name]',
libraryTarget: 'umd'
}
.
.
.
// extract css into its own file
new ExtractTextPlugin({
filename: utils.assetsLibPath('[name].min.css')
}),
into
output: {
path: config.lib.assetsRoot,
filename: utils.assetsLibPath('epicspinners.min.js'),
library: 'epicspinners',
libraryTarget: 'umd'
}
.
.
.
// extract css into its own file
new ExtractTextPlugin({
filename: utils.assetsLibPath('epicspinners.min.css')
}),
and the global object is back ๐
If I include a single spinner in my vue cli 3 project:
import bButton from 'bootstrap-vue/es/components/button/button';
import { HalfCircleSpinner } from 'epic-spinners';
@Component({
components:{
bButton,
HalfCircleSpinner,
},
})
//etc
This is what I see in the source-map explorer after executing a build:prod
I would have expected that given I'm only including a single component, and that component doesn't depend on the other spinners, that I'd be able to import it singly?
Can someone help me to integrate it in nuxtjs!
Thank you!
Hey guys, i was searching for spinner for react-native and i have found a library called react-epic-spinner which lead me to here.
I liked the animation and the spinners here and decided to port it to react-native using the built-in Animated and i have finished it and released it too.
https://www.npmjs.com/package/react-native-epic-spinners
It would be a pleasure if i can get a better support from the community as i have some troubles with 2 or maybe 3 of them due react-native difficulties or knowen bugs.
I know it might not the best place to post this but I didnt know where i can post this other than here.
Thanks in advance.
Hello,
I like this package a lot, but I cannot figure out a way to set the colour of the spinners using only css. It seems it can only be done by passing a colour value as a prop? I have global site colours set in a scss variables file and I want to be able use those variables to set the colour of the spinners. At the moment I just have to copy the colours from my variables file which is far from ideal.
Is there a solution?
Thanks
On this line
https://github.com/epicmaxco/epic-spinners/blob/master/package.json#L6
the main should point to the dist/lib folder rather than the source. on most webpack installation the module rules ignores node_modules folder so the src/ folder never gets compiled.
For now the import strategy is to just import specific vue-file.
Would make more sense to provide a compiled umd package so that components could be used from different environments and we don't enforce specific bundler + config.
As we go we can also:
See #13
Is there any to set custom default (timing, color etc) so that it would just work with <atom-spinner/>
Hi, can these be used as an overlay to a page?
[npm 11/02/18 6:04:09]
[npm 11/02/18 6:04:09] ERROR in static/js/0.js from UglifyJs
[npm 11/02/18 6:04:09] Unexpected token: punc (() [static/js/0.js:49,6]
[npm 11/02/18 6:04:09]
I'm guessing that it's related to babel and how I've configured my webpack. What debugging info do we need to debug this? I would prefer not to upgrade webpack to fix this.
โค grep webpack package.json
"copy-webpack-plugin": "^4.0.1",
"extract-text-webpack-plugin": "^2.0.0",
"friendly-errors-webpack-plugin": "^1.1.3",
"html-webpack-plugin": "^2.28.0",
"optimize-css-assets-webpack-plugin": "^2.0.0",
"webpack": "^2.6.1",
"webpack-bundle-analyzer": "^2.2.1",
"webpack-dev-middleware": "^1.10.0",
"webpack-hot-middleware": "^2.18.0",
"webpack-merge": "^4.1.0"
Thanks.
Or just make it really really long?
Just to let you know in case you don't already...
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.