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
- 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!
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.