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: [email protected]
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: [email protected]
📮
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
Other work we’ve done
License
MIT license.