[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-8696":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":16,"stars7d":17,"stars30d":18,"stars90d":16,"forks30d":16,"starsTrendScore":19,"compositeScore":20,"rankGlobal":10,"rankLanguage":10,"license":10,"archived":21,"fork":21,"defaultBranch":22,"hasWiki":23,"hasPages":21,"topics":24,"createdAt":10,"pushedAt":10,"updatedAt":40,"readmeContent":41,"aiSummary":42,"trendingCount":16,"starSnapshotCount":16,"syncStatus":17,"lastSyncTime":43,"discoverSource":44},8696,"epic-spinners","epicmaxco\u002Fepic-spinners","epicmaxco","Easy to use css spinners collection with Vue.js integration","https:\u002F\u002Fepic-spinners.epicmax.co",null,"Vue",3913,355,54,8,0,2,4,1,29.65,false,"master",true,[25,26,27,28,29,30,31,32,33,34,35,36,37,38,39],"animations","css","css-animations","css-loaders","css-spinners-collection","gallery","html","javascript","loading-animations","loading-screen","loading-spinner","spinner","vue","vue-components","vue-spinner-component","2026-06-12 02:01:57","# epic-spinners\n\nEasy to use css spinners collection with Vue3.js integration. Developed by [Epicmax](https:\u002F\u002Fepicmax.co\u002F).\n\n\u003C!---\nSubscribe to our [newsletter](https:\u002F\u002Fepicmax.co\u002Fnewsletter) to get Epic Spinners updates, our team's stories and Vue.js materials hand-picked by Epicmax.\n-->\n\n\u003Cp align=\"center\">\n  \u003Ca href=\"http:\u002F\u002Fepic-spinners.epicmax.co\" target=\"_blank\">\n    \u003Cimg src=\"https:\u002F\u002Fi.imgur.com\u002FRYxUVsM.png\" align=\"center\" width=\"888px\" \u002F>\n  \u003C\u002Fa>\n\u003C\u002Fp>\n\n## What's it all about?\n\nWe've collected and crafted a rich collection of spinners animated with css which are available both as html\u002Fcss code snippets and easily customizable vue.js components.\n\nSpecial thanks to [@martinvd](https:\u002F\u002Fgithub.com\u002Fmartinvd) for his outstanding codepens :)\n\n## Demo & Documentation\n\n[View demo](http:\u002F\u002Fepic-spinners.epicmax.co) to see vue.js components usage examples and html\u002Fcss source code\n\n## Installation\n\n```\nnpm install --save epic-spinners\n```\n\n## Usage\n\nVue.js usage example\n\n```ts\n\u003Ctemplate>\n  \u003Cdiv id=\"app\">\n    \u003Catom-spinner :animation-duration=\"1000\" :size=\"60\" color=\"#ff1d5e\" \u002F>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript>\nimport { AtomSpinner } from 'epic-spinners'\n\nexport default {\n  components: {\n    AtomSpinner,\n  },\n}\n\u003C\u002Fscript>\n```\n\nTo use pure html\u002Fcss version, visit our [gallery](http:\u002F\u002Fepic-spinners.epicmax.co) and click any spinner to see its html\u002Fcss source code\n\n## Vue.js components list\n\nYou can easily configure spinners size, color and animation speed\n\n```html\n\u003Cflower-spinner :animation-duration=\"2500\" :size=\"70\" color=\"#ff1d5e\" \u002F>\n\n\u003Cpixel-spinner :animation-duration=\"2000\" :pixel-size=\"70\" color=\"#ff1d5e\" \u002F>\n\n\u003Chollow-dots-spinner :animation-duration=\"1000\" :dot-size=\"15\" :dots-num=\"3\" color=\"#ff1d5e\" \u002F>\n\n\u003Cintersecting-circles-spinner :animation-duration=\"1200\" :size=\"70\" color=\"#ff1d5e\" \u002F>\n\n\u003Corbit-spinner :animation-duration=\"1200\" :size=\"55\" color=\"#ff1d5e\" \u002F>\n\n\u003Cradar-spinner :animation-duration=\"2000\" :size=\"60\" color=\"#ff1d5e\" \u002F>\n\n\u003Cscaling-squares-spinner :animation-duration=\"1250\" :size=\"65\" color=\"#ff1d5e\" \u002F>\n\n\u003Chalf-circle-spinner :animation-duration=\"1000\" :size=\"60\" color=\"#ff1d5e\" \u002F>\n\n\u003Ctrinity-rings-spinner :animation-duration=\"1500\" :size=\"66\" color=\"#ff1d5e\" \u002F>\n\n\u003Cfulfilling-square-spinner :animation-duration=\"4000\" :size=\"50\" color=\"#ff1d5e\" \u002F>\n\n\u003Ccircles-to-rhombuses-spinner\n  :animation-duration=\"1200\"\n  :circles-num=\"3\"\n  :circle-size=\"15\"\n  color=\"#ff1d5e\"\n\u002F>\n\n\u003Csemipolar-spinner :animation-duration=\"2000\" :size=\"65\" color=\"#ff1d5e\" \u002F>\n\n\u003Cself-building-square-spinner :animation-duration=\"6000\" :size=\"40\" color=\"#ff1d5e\" \u002F>\n\n\u003Cswapping-squares-spinner :animation-duration=\"1000\" :size=\"65\" color=\"#ff1d5e\" \u002F>\n\n\u003Cfulfilling-bouncing-circle-spinner :animation-duration=\"4000\" :size=\"60\" color=\"#ff1d5e\" \u002F>\n\n\u003Cfingerprint-spinner :animation-duration=\"1500\" :size=\"64\" color=\"#ff1d5e\" \u002F>\n\n\u003Cspring-spinner :animation-duration=\"3000\" :size=\"60\" color=\"#ff1d5e\" \u002F>\n\n\u003Catom-spinner :animation-duration=\"1000\" :size=\"60\" color=\"#ff1d5e\" \u002F>\n\n\u003Clooping-rhombuses-spinner :animation-duration=\"2500\" :rhombus-size=\"15\" color=\"#ff1d5e\" \u002F>\n\n\u003Cbreeding-rhombus-spinner :animation-duration=\"2000\" :size=\"65\" color=\"#ff1d5e\" \u002F>\n```\n\n## Epic spinners for other frameworks\n\n- [angular-epic-spinners](https:\u002F\u002Fgithub.com\u002Fhackafro\u002Fangular-epic-spinners) by @HackAfro\n- [react-epic-spinners](https:\u002F\u002Fgithub.com\u002Fbondz\u002Freact-epic-spinners) by @bondz\n- [react-native-epic-spinners](https:\u002F\u002Fgithub.com\u002FMuhmdRaouf\u002Freact-native-epic-spinners) by @MuhmdRaouf\n- [wc-epic-spinners](https:\u002F\u002Fgithub.com\u002Fcraigjennings11\u002Fwc-epic-spinners) by @craigjennings11\n\n## Contributing\n\nThanks for all your wonderful PRs, issues and ideas!\n\n[![](https:\u002F\u002Fsourcerer.io\u002Ffame\u002Fsmartapant\u002Fepicmaxco\u002Fepic-spinners\u002Fimages\u002F0)](https:\u002F\u002Fsourcerer.io\u002Ffame\u002Fsmartapant\u002Fepicmaxco\u002Fepic-spinners\u002Flinks\u002F0)[![](https:\u002F\u002Fsourcerer.io\u002Ffame\u002Fsmartapant\u002Fepicmaxco\u002Fepic-spinners\u002Fimages\u002F1)](https:\u002F\u002Fsourcerer.io\u002Ffame\u002Fsmartapant\u002Fepicmaxco\u002Fepic-spinners\u002Flinks\u002F1)[![](https:\u002F\u002Fsourcerer.io\u002Ffame\u002Fsmartapant\u002Fepicmaxco\u002Fepic-spinners\u002Fimages\u002F2)](https:\u002F\u002Fsourcerer.io\u002Ffame\u002Fsmartapant\u002Fepicmaxco\u002Fepic-spinners\u002Flinks\u002F2)[![](https:\u002F\u002Fsourcerer.io\u002Ffame\u002Fsmartapant\u002Fepicmaxco\u002Fepic-spinners\u002Fimages\u002F3)](https:\u002F\u002Fsourcerer.io\u002Ffame\u002Fsmartapant\u002Fepicmaxco\u002Fepic-spinners\u002Flinks\u002F3)[![](https:\u002F\u002Fsourcerer.io\u002Ffame\u002Fsmartapant\u002Fepicmaxco\u002Fepic-spinners\u002Fimages\u002F4)](https:\u002F\u002Fsourcerer.io\u002Ffame\u002Fsmartapant\u002Fepicmaxco\u002Fepic-spinners\u002Flinks\u002F4)[![](https:\u002F\u002Fsourcerer.io\u002Ffame\u002Fsmartapant\u002Fepicmaxco\u002Fepic-spinners\u002Fimages\u002F5)](https:\u002F\u002Fsourcerer.io\u002Ffame\u002Fsmartapant\u002Fepicmaxco\u002Fepic-spinners\u002Flinks\u002F5)[![](https:\u002F\u002Fsourcerer.io\u002Ffame\u002Fsmartapant\u002Fepicmaxco\u002Fepic-spinners\u002Fimages\u002F6)](https:\u002F\u002Fsourcerer.io\u002Ffame\u002Fsmartapant\u002Fepicmaxco\u002Fepic-spinners\u002Flinks\u002F6)[![](https:\u002F\u002Fsourcerer.io\u002Ffame\u002Fsmartapant\u002Fepicmaxco\u002Fepic-spinners\u002Fimages\u002F7)](https:\u002F\u002Fsourcerer.io\u002Ffame\u002Fsmartapant\u002Fepicmaxco\u002Fepic-spinners\u002Flinks\u002F7)\n\n## Partners & Sponsors ❤️\n\n\u003Cimg src=\".\u002F.github\u002Fassets\u002Fsponsors.jpg\" loading=\"lazy\" alt=\"Epicmax, vuejobs, ag-grid, flatlogic, browserstack and jetbrains\" width=\"400px\">\n\n\nBecome a partner: [hello@epicmax.co](mailto:hello@epicmax.co)\n\n## How can I support developers?\n\n- Star our GitHub repo :star:\n- Create pull requests, submit bugs, suggest new features or documentation updates :wrench:\n- Follow us on [Twitter](https:\u002F\u002Ftwitter.com\u002Fvuestic_ui) :feet:\n- Like our page on [Linkedin](https:\u002F\u002Fwww.linkedin.com\u002Fcompany\u002F18509340) :thumbsup:\n- Have collaboration ideas? Say hi: hello@epicmax.co :postbox:\n\n## Can I hire you guys?\n\n[Epicmax](https:\u002F\u002Fepicmax.co) is committed to Open Source from its beginning.\n[Epic Spinners](https:\u002F\u002Fepic-spinners.epicmax.co\u002F) was created and backed by Epicmax, and is supported through all the years.\nYou can request a consultation or order web development services by Epicmax via this [form](https:\u002F\u002Fepicmax.co\u002Fcontacts) :sunglasses:\nSay hi: \u003Ca href=“mailto:hello@epicmax.co”>hello@epicmax.co\u003C\u002Fa>. We will be happy to work with you!\n\n[Other work](https:\u002F\u002Fepicmax.co) we’ve done 🤘\n\n[Meet the Team](https:\u002F\u002Fvuestic.dev\u002Fteam)\n\n## License\n\n[MIT](https:\u002F\u002Fgithub.com\u002Fepicmaxco\u002Fvuestic-admin\u002Fblob\u002Fmaster\u002FLICENSE) license.\n","epic-spinners 是一个易于使用的 CSS 加载动画集合，支持 Vue.js 集成。该项目提供了多种样式精美的加载动画，这些动画既可以直接以 HTML\u002FCSS 代码片段的形式使用，也可以作为可自定义的 Vue 组件集成到项目中，允许用户轻松调整大小、颜色和动画速度等参数。它特别适用于需要为网站或应用程序添加视觉反馈的场景，如数据加载、页面过渡等，能够显著提升用户体验。","2026-06-11 03:19:19","top_language"]