GitHub - epicmaxco/epic-spinners: Easy to use css spinners collection with vue.j...
source link: https://github.com/epicmaxco/epic-spinners
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
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
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.
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK