epic-spinners

Easy to use css spinners collection with Vue3.js integration. Developed 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>
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

• angular-epic-spinners by @HackAfro
• react-epic-spinners by @bondz
• react-native-epic-spinners by @MuhmdRaouf
• wc-epic-spinners by @craigjennings11

Contributing

Thanks for all your wonderful PRs, issues and ideas!

Partners & Sponsors ❤️

Become a partner: hello@epicmax.co

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 Linkedin 👍
• Have collaboration ideas? Say hi: hello@epicmax.co 📮

Can I hire you guys?

Epicmax is committed to Open Source from its beginning. Epic Spinners was created and backed by Epicmax, and is supported through all the years. You can request a consultation or order web development services by Epicmax via this form 😎 Say hi: hello@epicmax.co. We will be happy to work with you!

Other work we’ve done 🤘

Meet the Team

License

MIT license.