Easy to use css spinners collection with Vue.js integration

  • By Epicmax
  • Last update: Dec 1, 2022
  • Comments: 11

epic-spinners

Easy to use css spinners collection with Vue.js integration. Developed by Epicmax.

Subscribe to our newsletter to get Epic Spinners updates, our team's stories and Vue.js materials hand-picked by Epicmax.

What's it all about?

We've collected and crafted a rich collection of spinners animated with css which are available both as html/css code snippets and easily customizable vue.js components.

Special thanks to @martinvd for his outstanding codepens :)

Demo & Documentation

View demo to see vue.js components usage examples and html/css source code

Installation

npm install --save epic-spinners

Usage

Vue.js usage example

<template>
  <div id="app">
     <atom-spinner
          :animation-duration="1000"
          :size="60"
          :color="'#ff1d5e'"
     />
  </div>
</template>

<script>
  // To use minified css and js files instead of .vue single file components:
  // import 'epic-spinners/dist/lib/epic-spinners.min.css'
  // import {AtomSpinner} from 'epic-spinners/dist/lib/epic-spinners.min.js'
  
  // To get tree shaking from webpack (won't import all spinners when you only need one)
  // import AtomSpinner from 'epic-spinners/src/components/lib/AtomSpinner'
  
  import {AtomSpinner} from 'epic-spinners'
  export default {
    components: {
      AtomSpinner
    }
  }
</script>

To use pure html/css version, visit our gallery and click any spinner to see its html/css source code

Vue.js components list

You can easily configure spinners' size, color and animation speed

<flower-spinner
  :animation-duration="2500"
  :size="70"
  :color="'#ff1d5e'"
/>

<pixel-spinner
  :animation-duration="2000"
  :pixel-size="70"
  :color="'#ff1d5e'"
/>

<hollow-dots-spinner
  :animation-duration="1000"
  :dot-size="15"
  :dots-num="3"
  :color="'#ff1d5e'"
/>

<intersecting-circles-spinner
  :animation-duration="1200"
  :size="70"
  :color="'#ff1d5e'"
/>

<orbit-spinner
  :animation-duration="1200"
  :size="55"
  :color="'#ff1d5e'"
/>

<radar-spinner
  :animation-duration="2000"
  :size="60"
  :color="'#ff1d5e'"
/>

<scaling-squares-spinner
  :animation-duration="1250"
  :size="65"
  :color="'#ff1d5e'"
/>

<half-circle-spinner
  :animation-duration="1000"
  :size="60"
  :color="'#ff1d5e'"
/>

<trinity-rings-spinner
  :animation-duration="1500"
  :size="66"
  :color="'#ff1d5e'"
/>

<fulfilling-square-spinner
  :animation-duration="4000"
  :size="50"
  :color="'#ff1d5e'"
/>

<circles-to-rhombuses-spinner
  :animation-duration="1200"
  :circles-num="3"
  :circle-size="15"
  :color="'#ff1d5e'"
/>
    
<semipolar-spinner
  :animation-duration="2000"
  :size="65"
  :color="'#ff1d5e'"
/>
    
<self-building-square-spinner
  :animation-duration="6000"
  :size="40"
  :color="'#ff1d5e'"
/>
    
<swapping-squares-spinner
  :animation-duration="1000"
  :size="65"
  :color="'#ff1d5e'"
/>

<fulfilling-bouncing-circle-spinner
  :animation-duration="4000"
  :size="60"
  :color="'#ff1d5e'"
/>

<fingerprint-spinner
  :animation-duration="1500"
  :size="64"
  :color="'#ff1d5e'"
/>

<spring-spinner
  :animation-duration="3000"
  :size="60"
  :color="'#ff1d5e'"
/>

<atom-spinner
  :animation-duration="1000"
  :size="60"
  :color="'#ff1d5e'"
/>

<looping-rhombuses-spinner
  :animation-duration="2500"
  :rhombus-size="15"
  :color="'#ff1d5e'"
/>

<breeding-rhombus-spinner
  :animation-duration="2000"
  :size="65"
  :color="'#ff1d5e'"
/>

Epic spinners for other frameworks

Contributing

Thanks for all your wonderful PRs, issues and ideas!

How can I support developers?

  • Star our GitHub repo
  • Create pull requests, submit bugs, suggest new features or documentation updates 🔧
  • Follow us on Twitter 🐾
  • Like our page on Facebook 👍
  • Subscribe to our newsletter 📮

Can I hire you guys?

Yes! Visit our homepage or simply send us a message to [email protected]. We will be happy to work with you!

License

MIT license.

Github

https://github.com/epicmaxco/epic-spinners

Comments(11)

  • 1

    Exposing ES6 lib.js doesn't work with Webpack as configured in Nuxt.js

    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)|6.26.3| |Node.js|10.5.0| |NPM|6.0.0.|

    Error

    { /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' }
    

    Initial assesment

    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.

  • 2

    Unit tests failed

    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>
    
  • 3

    Importing a single spinner adds the entire collection of spinners to prod build

    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

    screen shot 2019-01-08 at 9 56 44 am

    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?

  • 4

    Compatibility with newest Vue version or Nuxt

    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!

  • 5

    DOMException: Failed to read the 'cssRules' property from 'CSSStyleSheet': Cannot access rules

    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)
    
  • 6

    Website Error

    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.

  • 7

    "SecurityError: Failed to read the 'cssRules' property from 'CSSStyleSheet': Cannot access rules"

    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
    
  • 8

    ERROR npm build Unexpected character '`' in node_modules/epic-spinners/...

    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 https://github.com/epicmaxco/epic-spinners/issues/17#issuecomment-566468332

  • 9

    Register globally?

    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.

  • 10

    IE11 Problem with running compiled code

    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.

    image

    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?

  • 11

    package.json main should point to dist/ not src/

    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.