Easy to use css spinners collection with Vue.js integration

Overview

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.

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

    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.

    bug 
    opened by bmarkovic 13
  • Is there any plan for React Version ?

    Is there any plan for React Version ?

    opened by collegeimprovements 8
  • Unit tests failed

    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>
    
    opened by yarkovaleksei 6
  • Compatibility with newest Vue version or Nuxt

    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!

    opened by mzastue 4
  • DOMException: Failed to read the 'cssRules' property from 'CSSStyleSheet': Cannot access rules

    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)
    
    opened by JCKodel 4
  • Angular components for epic spinners

    Angular components for epic spinners

    Thinking of creating angular components for epic spinners. I can create a pull request and start working on it if that's okay

    opened by HackAfro 4
  • Website Error

    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.

    opened by likeadeckofcards 4
  • Importing a single spinner adds the entire collection of spinners to prod build

    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?

    opened by chriszrc 4
  • Your gallery site appears to be down!

    Your gallery site appears to be down!

    Just to let you know in case you don't already...

    opened by covertbert 2
  • "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
    
    opened by BenAHammond 2
  • `beforeDestroy` has been renamed to `beforeUnmount`.

    `beforeDestroy` has been renamed to `beforeUnmount`.

    I tried to use it in VUE3, do you have any plans

    image

    There are some compatibility issues

    opened by yinfoyuan 0
  • Integrate epic-spinner in nuxtjs project

    Integrate epic-spinner in nuxtjs project

    Hi everyone!

    Can someone help me to integrate it in nuxtjs! Thank you!

    opened by jeydi243 5
  • example hollow-dots-spinner: fix properties

    example hollow-dots-spinner: fix properties

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

    opened by MauricioHernanCabrera 0
  • Incorrect example

    Incorrect example

    https://epic-spinners.epicmax.co/ image image

    bug 
    opened by asvae 0
  • there is an error under ie11

    there is an error under ie11

    I installed babel-polyfill ,but there is still the error. image

    image

    bug 
    opened by wzfjesun 4
  • Prebuild vue components

    Prebuild vue components

    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:

    • [ ] Check tree shaking works. One solution is creating separate file for every spinner. Another way is to do a config. Each of these should be tested with analyzer to make sure bundle is built correctly.

    See #13

    feature 
    opened by asvae 0
Releases(v1.1.0)
Owner
Epicmax
We make interfaces. #11 Vue.js developer on GitHub by Git Awards
Epicmax
Easy to use css spinners collection with vue.js integration

epic-spinners Easy to use css spinners collection with Vue.js integration. Developed by Epicmax. Subscribe to our newsletter to get Epic Spinners upda

Yauheni Prakopchyk 9 May 3, 2020
💫 A collection of loading spinner components for Vuejs

Vue Spinners A Vue.js port of react-spinners. ?? Installation npm install --save @saeris/vue-spinners # or yarn add @saeris/vue-spinners ?? Usage Ther

Drake Costa 269 Jun 4, 2021
Complex Loader and Progress Management for Vue/Vuex and Nuxt Applications

Multiple Process Loader Management for Vue and (optionally) Vuex. Read the Medium post "Managing Complex Waiting Experiences on Web UIs". Play with de

Fatih Kadir Akın 1.8k Jun 7, 2021
🌀 A collection of loading indicators animated with CSS for VueJS

vue-spinkit A collection of loading indicators animated with CSS for VueJS Inspiration Spinkit css animated loading react-spinkit loaders.css DEMO Ins

Chanwit Piromplad 106 May 10, 2021
Access thousands of icons as Vue components in Vite

vite-plugin-icons Access thousands of icons as Vue components in Vite 90+ iconsets powered by Iconify Browser the icons Install ℹ️ Vite 2 is supported

Anthony Fu 108 Jun 14, 2021
Vue + loaders.css

vue loaders loaders.css + vue < previous version NPM $ npm install -S vue-loaders CDN umd: https://unpkg.com/vue-loaders/dist/vue-loaders.umd.js esm/m

Kirill Khoroshilov 130 May 18, 2021
A Vue.js component to create beautiful animated circular progress bars. https://vue-ellipse-progress-demo.netlify.com/

vue-ellipse-progress A dependency-free Vue.js plugin to create beautiful and animated circular progress bars, implemented with SVG. The purpose of thi

Sergej Atamantschuk 123 Jun 3, 2021
BlockUI for vue 2, similiar to jquery blockUI, can be used for loading screen.

vue-blockui BlockUI for vue 2, similiar to jquery blockUI, can be used for loading screen. Table of contents Installation Usage Demo Screens Installat

Jeff 57 Mar 28, 2021
The Ultimate fully-customizable plugin for skeleton cards in Vue. It's a no-brainer.

Vue Ultimate Skeleton Cards Check out the guide and demo for full information. This is just an overview. Note: This version is for Vue 2. A new versio

Neelansh Mathur 63 May 29, 2021
Stable, Flexible and Fully Customizable Vue and Nuxt preloaders library

Important! in 2.0, nuxt module has been removed. The reason is that you don't really need it. Just use it as a vue plugin. Vue Preloaders Stable, Flex

igal leikin 37 Apr 7, 2021
Vue.js plugin that handles buttons async lock state. Demo: https://stukh.github.io/vue-promise-btn/

vue-promise-btn Example and Documentation https://STUkh.github.io/vue-promise-btn/ Features Easy-to-use API Flexible Usage Works with any tag and even

Alex 169 Mar 28, 2021
Vue.js component for full screen loading indicator :cyclone:

Vue Loading Overlay Component Vue.js component for full screen loading indicator Demo or JSFiddle Installation # yarn yarn add vue-loading-overlay #

Ankur Kumar 835 Jun 13, 2021
Progress bars and loading indicators for Vue.js

vue-progress-path Progress bars and loading indicators that can take any form! This library is Work In Progress. Live Demo Sponsors Gold Silver Bronze

Guillaume Chau 336 Jun 5, 2021
A simple, flexible spinner for Vue.js

vue-simple-spinner A simple, flexible spinner for Vue.js vue-simple-spinner is designed to be a lightweight Vue.js spinner requiring minimal configura

Dave Williams 391 Jun 12, 2021