{"id":305142,"url":"https://github.com/epicmaxco/epic-spinners","last_synced_at":"2025-05-13T21:10:29.345Z","repository":{"id":37333809,"uuid":"113158574","full_name":"epicmaxco/epic-spinners","owner":"epicmaxco","description":"Easy to use css spinners collection with Vue.js integration","archived":false,"fork":false,"pushed_at":"2024-09-05T12:22:24.000Z","size":1472,"stargazers_count":3881,"open_issues_count":8,"forks_count":361,"subscribers_count":55,"default_branch":"master","last_synced_at":"2025-04-28T12:15:36.964Z","etag":null,"topics":["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"],"latest_commit_sha":null,"homepage":"https://epic-spinners.epicmax.co","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/epicmaxco.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-12-05T09:05:15.000Z","updated_at":"2025-04-25T07:44:30.000Z","dependencies_parsed_at":"2023-02-16T06:30:42.273Z","dependency_job_id":"376fdf6d-92cc-42f5-8f96-522785e6c3b0","html_url":"https://github.com/epicmaxco/epic-spinners","commit_stats":{"total_commits":105,"total_committers":15,"mean_commits":7.0,"dds":0.2666666666666667,"last_synced_commit":"16c5584a6f1be99df144b2e8bcbd575d0febf479"},"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/epicmaxco%2Fepic-spinners","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/epicmaxco%2Fepic-spinners/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/epicmaxco%2Fepic-spinners/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/epicmaxco%2Fepic-spinners/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/epicmaxco","download_url":"https://codeload.github.com/epicmaxco/epic-spinners/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251311334,"owners_count":21569009,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["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"],"created_at":"2024-01-07T07:56:19.964Z","updated_at":"2025-04-28T12:15:45.749Z","avatar_url":"https://github.com/epicmaxco.png","language":"Vue","funding_links":[],"categories":["Components \u0026 Libraries","Vue","UI Components","UI组件","UI Components [🔝](#readme)"],"sub_categories":["UI Components","Loader","装载机","Progress/ Spinners/ Loaders"],"readme":"# epic-spinners\n\nEasy to use css spinners collection with Vue3.js integration. Developed by [Epicmax](https://epicmax.co/).\n\n\u003c!---\nSubscribe to our [newsletter](https://epicmax.co/newsletter) to get Epic Spinners updates, our team's stories and Vue.js materials hand-picked by Epicmax.\n--\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"http://epic-spinners.epicmax.co\" target=\"_blank\"\u003e\n    \u003cimg src=\"https://i.imgur.com/RYxUVsM.png\" align=\"center\" width=\"888px\" /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\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/css code snippets and easily customizable vue.js components.\n\nSpecial thanks to [@martinvd](https://github.com/martinvd) for his outstanding codepens :)\n\n## Demo \u0026 Documentation\n\n[View demo](http://epic-spinners.epicmax.co) to see vue.js components usage examples and html/css 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\u003e\n  \u003cdiv id=\"app\"\u003e\n    \u003catom-spinner :animation-duration=\"1000\" :size=\"60\" color=\"#ff1d5e\" /\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport { AtomSpinner } from 'epic-spinners'\n\nexport default {\n  components: {\n    AtomSpinner,\n  },\n}\n\u003c/script\u003e\n```\n\nTo use pure html/css version, visit our [gallery](http://epic-spinners.epicmax.co) and click any spinner to see its html/css 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\" /\u003e\n\n\u003cpixel-spinner :animation-duration=\"2000\" :pixel-size=\"70\" color=\"#ff1d5e\" /\u003e\n\n\u003chollow-dots-spinner :animation-duration=\"1000\" :dot-size=\"15\" :dots-num=\"3\" color=\"#ff1d5e\" /\u003e\n\n\u003cintersecting-circles-spinner :animation-duration=\"1200\" :size=\"70\" color=\"#ff1d5e\" /\u003e\n\n\u003corbit-spinner :animation-duration=\"1200\" :size=\"55\" color=\"#ff1d5e\" /\u003e\n\n\u003cradar-spinner :animation-duration=\"2000\" :size=\"60\" color=\"#ff1d5e\" /\u003e\n\n\u003cscaling-squares-spinner :animation-duration=\"1250\" :size=\"65\" color=\"#ff1d5e\" /\u003e\n\n\u003chalf-circle-spinner :animation-duration=\"1000\" :size=\"60\" color=\"#ff1d5e\" /\u003e\n\n\u003ctrinity-rings-spinner :animation-duration=\"1500\" :size=\"66\" color=\"#ff1d5e\" /\u003e\n\n\u003cfulfilling-square-spinner :animation-duration=\"4000\" :size=\"50\" color=\"#ff1d5e\" /\u003e\n\n\u003ccircles-to-rhombuses-spinner\n  :animation-duration=\"1200\"\n  :circles-num=\"3\"\n  :circle-size=\"15\"\n  color=\"#ff1d5e\"\n/\u003e\n\n\u003csemipolar-spinner :animation-duration=\"2000\" :size=\"65\" color=\"#ff1d5e\" /\u003e\n\n\u003cself-building-square-spinner :animation-duration=\"6000\" :size=\"40\" color=\"#ff1d5e\" /\u003e\n\n\u003cswapping-squares-spinner :animation-duration=\"1000\" :size=\"65\" color=\"#ff1d5e\" /\u003e\n\n\u003cfulfilling-bouncing-circle-spinner :animation-duration=\"4000\" :size=\"60\" color=\"#ff1d5e\" /\u003e\n\n\u003cfingerprint-spinner :animation-duration=\"1500\" :size=\"64\" color=\"#ff1d5e\" /\u003e\n\n\u003cspring-spinner :animation-duration=\"3000\" :size=\"60\" color=\"#ff1d5e\" /\u003e\n\n\u003catom-spinner :animation-duration=\"1000\" :size=\"60\" color=\"#ff1d5e\" /\u003e\n\n\u003clooping-rhombuses-spinner :animation-duration=\"2500\" :rhombus-size=\"15\" color=\"#ff1d5e\" /\u003e\n\n\u003cbreeding-rhombus-spinner :animation-duration=\"2000\" :size=\"65\" color=\"#ff1d5e\" /\u003e\n```\n\n## Epic spinners for other frameworks\n\n- [angular-epic-spinners](https://github.com/hackafro/angular-epic-spinners) by @HackAfro\n- [react-epic-spinners](https://github.com/bondz/react-epic-spinners) by @bondz\n- [react-native-epic-spinners](https://github.com/MuhmdRaouf/react-native-epic-spinners) by @MuhmdRaouf\n- [wc-epic-spinners](https://github.com/craigjennings11/wc-epic-spinners) by @craigjennings11\n\n## Contributing\n\nThanks for all your wonderful PRs, issues and ideas!\n\n[![](https://sourcerer.io/fame/smartapant/epicmaxco/epic-spinners/images/0)](https://sourcerer.io/fame/smartapant/epicmaxco/epic-spinners/links/0)[![](https://sourcerer.io/fame/smartapant/epicmaxco/epic-spinners/images/1)](https://sourcerer.io/fame/smartapant/epicmaxco/epic-spinners/links/1)[![](https://sourcerer.io/fame/smartapant/epicmaxco/epic-spinners/images/2)](https://sourcerer.io/fame/smartapant/epicmaxco/epic-spinners/links/2)[![](https://sourcerer.io/fame/smartapant/epicmaxco/epic-spinners/images/3)](https://sourcerer.io/fame/smartapant/epicmaxco/epic-spinners/links/3)[![](https://sourcerer.io/fame/smartapant/epicmaxco/epic-spinners/images/4)](https://sourcerer.io/fame/smartapant/epicmaxco/epic-spinners/links/4)[![](https://sourcerer.io/fame/smartapant/epicmaxco/epic-spinners/images/5)](https://sourcerer.io/fame/smartapant/epicmaxco/epic-spinners/links/5)[![](https://sourcerer.io/fame/smartapant/epicmaxco/epic-spinners/images/6)](https://sourcerer.io/fame/smartapant/epicmaxco/epic-spinners/links/6)[![](https://sourcerer.io/fame/smartapant/epicmaxco/epic-spinners/images/7)](https://sourcerer.io/fame/smartapant/epicmaxco/epic-spinners/links/7)\n\n## Partners \u0026 Sponsors ❤️\n\n\u003cimg src=\"./.github/assets/sponsors.jpg\" loading=\"lazy\" alt=\"Epicmax, vuejobs, ag-grid, flatlogic, browserstack and jetbrains\" width=\"400px\"\u003e\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://twitter.com/vuestic_ui) :feet:\n- Like our page on [Linkedin](https://www.linkedin.com/company/18509340) :thumbsup:\n- Have collaboration ideas? Say hi: hello@epicmax.co :postbox:\n\n## Can I hire you guys?\n\n[Epicmax](https://epicmax.co) is committed to Open Source from its beginning.\n[Epic Spinners](https://epic-spinners.epicmax.co/) 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://epicmax.co/contacts) :sunglasses:\nSay hi: \u003ca href=“mailto:hello@epicmax.co”\u003ehello@epicmax.co\u003c/a\u003e. We will be happy to work with you!\n\n[Other work](https://epicmax.co) we’ve done 🤘\n\n[Meet the Team](https://vuestic.dev/team)\n\n## License\n\n[MIT](https://github.com/epicmaxco/vuestic-admin/blob/master/LICENSE) license.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fepicmaxco%2Fepic-spinners","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fepicmaxco%2Fepic-spinners","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fepicmaxco%2Fepic-spinners/lists"}