{"id":16666936,"url":"https://github.com/joshk2/vue-spinners-css","last_synced_at":"2025-03-17T00:31:34.054Z","repository":{"id":57396634,"uuid":"206128365","full_name":"JoshK2/vue-spinners-css","owner":"JoshK2","description":"Amazing collection of Vue spinners components with pure css.","archived":false,"fork":false,"pushed_at":"2020-12-02T12:10:50.000Z","size":451,"stargazers_count":55,"open_issues_count":1,"forks_count":9,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-10-13T11:12:53.994Z","etag":null,"topics":["animation","animations","css","loaders","progress","spinners","vue","vue-components","vue-spinner-component","vue-spinners"],"latest_commit_sha":null,"homepage":"https://bit.dev/joshk/vue-spinners-css","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/JoshK2.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-09-03T16:59:01.000Z","updated_at":"2024-01-25T07:54:39.000Z","dependencies_parsed_at":"2022-08-27T14:27:17.319Z","dependency_job_id":null,"html_url":"https://github.com/JoshK2/vue-spinners-css","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JoshK2%2Fvue-spinners-css","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JoshK2%2Fvue-spinners-css/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JoshK2%2Fvue-spinners-css/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JoshK2%2Fvue-spinners-css/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/JoshK2","download_url":"https://codeload.github.com/JoshK2/vue-spinners-css/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":221669221,"owners_count":16860839,"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":["animation","animations","css","loaders","progress","spinners","vue","vue-components","vue-spinner-component","vue-spinners"],"created_at":"2024-10-12T11:12:30.140Z","updated_at":"2024-10-27T11:34:36.103Z","avatar_url":"https://github.com/JoshK2.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Vue Spinners CSS Loaders ([React](https://github.com/JoshK2/react-spinners-css), [Angular](https://github.com/JoshK2/ng-spinners))\n[![CircleCI](https://circleci.com/gh/JoshK2/vue-spinners-css.svg?style=svg)](https://circleci.com/gh/JoshK2/vue-spinners-css)\n[![bit components](https://img.shields.io/badge/dynamic/json.svg?color=6e3991\u0026label=bit%20components\u0026query=payload.totalComponents\u0026url=https%3A%2F%2Fapi.bit.dev%2Fscope%2Fjoshk%2Fvue-spinners-css)](https://bit.dev/joshk/vue-spinners-css)\n[![npm version](https://badge.fury.io/js/vue-spinners-css.svg?u)](https://www.npmjs.com/package/vue-spinners-css)\n[![GitHub stars](https://img.shields.io/github/stars/joshk2/vue-spinners-css)](https://github.com/JoshK2/vue-spinners-css/stargazers)\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://github.com/prettier/prettier)\n[![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://raw.githubusercontent.com/JoshK2/vue-spinners-css/master/LICENSE)\n[![Twitter Follow](https://img.shields.io/twitter/follow/joshkuttler)](https://twitter.com/JoshKuttler)\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://bit.dev/joshk/vue-spinners-css\"\u003e\u003cimg src=\"https://i.imagesup.co/images2/4b9974d257035da5fcefcc63621103ba68b8aefc.gif\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\nAmazing collection of Vue spinners components with pure css.  \nThe Vue spinners are based on loading.io and from all over the web.  \n\n- 💅No extra CSS imports\n- ✂️Zero dependencies\n- 📦Spinners can be installing separately\n\n## [Live Demo](https://bit.dev/joshk/vue-spinners-css)\n\nBrowse components and explore their props with [Bit](https://bit.dev/joshk/vue-spinners-css).  \nInstall specific vue spinner component with npm, yarn, unpkg or bit without having to install the whole project.  \n[Install components and live demo](https://bit.dev/joshk/vue-spinners-css)\n  \n## 🚀 List of Spinners - PropTypes and Default Props\n\nEach component accepts a `color` prop, and `loading` prop.  \nThe default `color` prop is `#7f58af`.  \nThe default `loading` prop is `true`.  \nComponent that accepts size prop have a default size in pixel.\nComponent that accepts duration prop have a default duration in seconds.\n\n| Spinner          | color: string | loading: boolean  | size: number | duration: string |\n| ---------------- | ------------  | ----------------- | ------------ | ---------------- |\n| Circle Spinner   | `#7f58af`     | `true`            | `64`         | `2.4s`           |\n| Default Spinner  | `#7f58af`     | `true`            | `80`         | `1.2s`           |\n| DualRing Spinner | `#7f58af`     | `true`            | `80`         | `1.2s`           |\n| Ellipsis Spinner | `#7f58af`     | `true`            |              |                  |\n| Facebook Spinner | `#7f58af`     | `true`            | `80`         | `1.2s`           |\n| Grid Spinner     | `#7f58af`     | `true`            | `80`         | `1.2s`           |\n| Heart Spinner    | `#7f58af`     | `true`            | `80`         | `1.2s`           |\n| Hourglass Spinner| `#7f58af`     | `true`            | `80`         | `1.2s`           |\n| Ring Spinner     | `#7f58af`     | `true`            | `80`         | `1.2s`           |\n| Ripple Spinner   | `#7f58af`     | `true`            | `80`         | `1s`             |\n| Roller Spinner   | `#7f58af`     | `true`            | `80`         | `1.2s`           |\n| Spinner Spinner  | `#7f58af`     | `true`            | `80`         | `1.2s`           |\n| Orbitals Spinner | `#7f58af`     | `true`            | `80`         | `4s`             |\n| Line Spinner     | `#7f58af`     | `true`            | `80`         | `1.2s`           |\n\n## 📦 Installation\n### Using [npm](https://www.npmjs.com/package/vue-spinners-css) to install vue-spinners-css:  \n\n```bash\n$ npm i --save vue-spinners-css\n```  \n\n### Play and install vue spinners with Bit\n\nInstall specific vue spinner component with bit, npm or yarn without having to install the whole project.  \nUsing [bit](https://bit.dev/joshk/vue-spinners-css) to play with live demo, and try the spinners before install.\n\nset npm regisetry config(one time action):\n```bash\nnpm config set '@bit:registry' https://node.bit.dev\n```\nand use your favorite package manager:\n```bash\nnpm i @bit/joshk.vue-spinners-css.facebook-loader\nyarn add @bit/joshk.vue-spinners-css.facebook-loader\nbit import joshk.vue-spinners-css/facebook-loader \n```  \n\n## 💻 Usage Examples\n\nyou can use a random color from [jotils](https://bit.dev/joshk/jotils/get-random-color)  \n\n### Vue Global Registration\n```javascript\nimport Vue from 'vue'\nimport * as VueSpinnersCss from \"vue-spinners-css\";\n\nVue.use(VueSpinnersCss)\n\n// Each spinner can now be used in your templates anywhere in the app!\n```\n\n### Vue Local Registration\n```html\n\u003ctemplate\u003e\n  \u003cFacebookLoader :color=\"randomcolor\" /\u003e\n  \u003cFacebookLoader /\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n  //using npm or yarn\n  import { FacebookLoader } from 'vue-spinners-css';\n  //using bit\n  import FacebookLoader from '@bit/joshk.vue-spinners-css.facebook-loader';\n  import { getRandomColor } from '@bit/joshk.jotils.get-random-color'\n\n  export default ({\n    data: () =\u003e ({\n      randomcolor: getRandomColor()\n    }),\n    components: {\n      FacebookLoader,\n    }\n  })\n\u003c/script\u003e\n```\n\n### Unpkg Import\n```html\n\u003c!--Load libraries in your page's header--\u003e\n\u003cscript src=\"https://unpkg.com/vue\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://unpkg.com/vue-spinners-css\"\u003e\u003c/script\u003e\n\n\u003c!--Use a component somewhere in your app--\u003e\n\u003cdiv id=\"app\"\u003e\n  \u003cfacebook-loader color=\"blue\" /\u003e\n\u003c/div\u003e\n\n\u003cscript\u003e\n  new Vue({ el: '#app', data: { } })\n\u003c/script\u003e\n```\n\n\n## 👾 Development\nYou can see the components locally by cloning this repo and doing the following steps:\n- Install dependencies from `package.json`, run: `npm install`.\n- Run the app in the development mode, run: `npm run serve`.  \n\n## ⌨️ Contributing\n- Pull requests and ⭐ stars are always welcome.\n- For bugs and feature requests, please create an issue.\n\n## 👏🏻 Support my open-source\nIf you like to support my open-source contributions please star and share this project. 💫\n\n## 📄 License\n[MIT](https://github.com/JoshK2/vue-spinners-css/blob/master/LICENSE)\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjoshk2%2Fvue-spinners-css","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjoshk2%2Fvue-spinners-css","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjoshk2%2Fvue-spinners-css/lists"}