{"id":13426297,"url":"https://github.com/Hokid/vue-loaders","last_synced_at":"2025-03-15T21:30:53.165Z","repository":{"id":29710194,"uuid":"122559985","full_name":"Hokid/vue-loaders","owner":"Hokid","description":"Vue + loaders.css","archived":false,"fork":false,"pushed_at":"2023-01-07T02:19:13.000Z","size":3021,"stargazers_count":171,"open_issues_count":9,"forks_count":12,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-04-23T10:35:02.090Z","etag":null,"topics":["animate","animation","busy","component","css","css3","ide","indicator","lib","loader","loading","plugin","progress","spinner","ui","vue","vue-components","vuejs","wait","waiting"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/Hokid.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-02-23T01:54:49.000Z","updated_at":"2024-04-17T03:34:50.000Z","dependencies_parsed_at":"2023-01-14T15:30:43.258Z","dependency_job_id":null,"html_url":"https://github.com/Hokid/vue-loaders","commit_stats":null,"previous_names":[],"tags_count":17,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Hokid%2Fvue-loaders","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Hokid%2Fvue-loaders/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Hokid%2Fvue-loaders/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Hokid%2Fvue-loaders/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Hokid","download_url":"https://codeload.github.com/Hokid/vue-loaders/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243792315,"owners_count":20348617,"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":["animate","animation","busy","component","css","css3","ide","indicator","lib","loader","loading","plugin","progress","spinner","ui","vue","vue-components","vuejs","wait","waiting"],"created_at":"2024-07-31T00:01:31.249Z","updated_at":"2025-03-15T21:30:52.573Z","avatar_url":"https://github.com/Hokid.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","UI组件","Components \u0026 Libraries","UI Components","UI Components [🔝](#readme)"],"sub_categories":["装载机","UI Components","Loader"],"readme":"\u003cdiv align=\"center\"\u003e\n    \u003cimg src=\"assets/gifs/pacman.gif\" alt=\"vue-loaders\" /\u003e\n\u003c/div\u003e\n\n\u003ch1 align=\"center\"\u003evue loaders\u003c/h1\u003e\n\n\u003cdiv align=\"center\"\u003e\n    \u003ca href=\"https://www.npmjs.com/package/vue-loaders\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/vue-loaders.svg\" alt=\"Version\" /\u003e\u003c/a\u003e\n\u003c/div\u003e\n\n\u003cdiv align=\"center\"\u003e\n  \u003ca href=\"https://github.com/ConnorAtherton/loaders.css\"\u003eloaders.css\u003c/a\u003e + vue\n\u003c/div\u003e\n\n[\u003c previous version](https://github.com/Hokid/vue-loaders/tree/34e07c7c88e602423e497427e9f322692bd336d4)\n\n## NPM\n\n```bash\n$ npm install -S vue-loaders\n```\n\n## CDN\n\n* umd: https://unpkg.com/vue-loaders/dist/vue-loaders.umd.js\n* esm/mjs: https://unpkg.com/vue-loaders/dist/vue-loaders.esm.js\n* umd: `https://unpkg.com/vue-loaders/dist/loaders/`[loader name](#loaders)`.js`\n\n## Usage\n\nBefore starting playing with loaders include some CSS to your bundle or page:\n\n```javascript\nimport 'vue-loaders/dist/vue-loaders.css';\n```\nfor bundle\n\n```html\n\u003clink rel=\"stylesheet\" href=\"https://unpkg.com/vue-loaders/dist/vue-loaders.css\"\u003e\n```\nfor page\n\nIt\\`s mandatory step. Without this CSS your loaders will not appears on page.\n\nThere are two ways how to use the library.\n\nThe first is to use main component `vue-loaders`.\n\n```html\n\u003cvue-loaders name=\"ball-beat\"\u003e\u003c/vue-loaders\u003e\n```\n`name` is name of loader. You will found all avaliable loaders names [here](#loaders).\n\nTo use this way you should import `vue-loaders` and add this as plugin:\n\n```javascript\nimport VueLoaders from 'vue-loaders';\n// add plugin\nVue.use(VueLoaders);\n```\nor on page\n```html\n\u003cscript src=\"https://unpkg.com/vue-loaders\"\u003e\u003c/script\u003e\n\n\u003cscript\u003e\n  Vue.use(VueLoaders);\n\u003c/script\u003e\n```\n\nThe second is to use separet loader component.\n\n```html\n\u003cvue-loaders-ball-beat\u003e\u003c/vue-loaders-ball-beat\u003e\n```\nYou will found all avaliable loaders [here](#loaders).\n\nImport separate loader component and then add this as plugin:\n\n```javascript\nimport VueLoadersBallBeat from 'vue-loaders/dist/loaders/ball-beat';\n\nVue.use(VueLoadersBallBeat);\n```\nThis way is good for perfomance and bundle size.\n\n...or import entier library just as for the fist way:\n\n```javascript\nimport VueLoaders from 'vue-loaders';\n\nVue.use(VueLoaders);\n```\n\nYou can prefer first way or second or both of them. The main diffrent between them is when you use\nthe second way you don\\`t need to include all loaders to your bundle.\n\nAlso check out props [here](#props) or use IDE tips, this library provide [web-types](https://github.com/JetBrains/web-types).\n\n\n\nAnd some examples:\n\n```javascript\nimport Vue from 'vue/dist/vue.esm.browser';\nimport 'vue-loaders/dist/vue-loaders.css';\nimport VueLoaders from 'vue-loaders';\n\nVue.use(VueLoaders);\n\nconst template = `\n\u003cdiv\u003e\n  \u003cvue-loaders-ball-beat color=\"red\" scale=\"1\"\u003e\u003c/vue-loaders-ball-beat\u003e\n  \u003chr/\u003e\n  \u003cvue-loaders name=\"ball-beat\" color=\"red\" scale=\"1\"\u003e\u003c/vue-loaders\u003e\n\u003c/div\u003e\n`;\n\nnew Vue({\n  template\n}).$mount('#app');\n```\n\n```javascript\nimport Vue from 'vue/dist/vue.esm.browser';\nimport 'vue-loaders/dist/vue-loaders.css';\nimport VueLoadersBallBeat from 'vue-loaders/dist/loaders/ball-beat';\n\nVue.use(VueLoadersBallBeat);\n\nconst template = `\n  \u003cvue-loaders-ball-beat color=\"red\" scale=\"1\"\u003e\u003c/vue-loaders-ball-beat\u003e\n`;\n\nnew Vue({\n  template\n}).$mount('#app');\n```\n\n```javascript\nimport Vue from 'vue/dist/vue.esm.browser';\nimport 'vue-loaders/dist/vue-loaders.css';\nimport VueLoaders from 'vue-loaders';\n\nVue.component('my-name', VueLoaders.component);\n\nconst template = `\n  \u003cmy-name name=\"ball-beat\" color=\"red\" scale=\"1\"\u003e\u003c/my-name\u003e\n`;\n\nnew Vue({\n  template\n}).$mount('#app');\n```\n\n```javascript\nimport Vue from 'vue/dist/vue.esm.browser';\nimport 'vue-loaders/dist/vue-loaders.css';\nimport VueLoadersBallBeat from 'vue-loaders/dist/loaders/ball-beat';\n\nVue.component('my-name', VueLoadersBallBeat.component);\n\nconst template = `\n  \u003cmy-name color=\"red\" scale=\"1\"\u003e\u003c/my-name\u003e\n`;\n\nnew Vue({\n  template\n}).$mount('#app');\n```\n\n```javascript\nimport Vue from 'vue/dist/vue.esm.browser';\nimport 'vue-loaders/dist/vue-loaders.css';\nimport VueLoadersBallBeat from 'vue-loaders/dist/loaders/ball-beat.js';\n\nconst template = `\n  \u003cvue-loaders-ball-beat color=\"red\" scale=\"1\"\u003e\u003c/vue-loaders-ball-beat\u003e\n`;\n\nnew Vue({\n  components: {\n    [VueLoadersBallBeat.component.name]: VueLoadersBallBeat.component\n  },\n  template\n}).$mount('#app');\n```\n\nIf you want manage loader color from CSS outside follow this example:\n```javascript\nimport Vue from 'vue/dist/vue.esm.browser';\nimport 'vue-loaders/dist/vue-loaders.css';\nimport VueLoaders from 'vue-loaders';\n\nVue.use(VueLoaders);\n\nconst template = `\n\u003cdiv style=\"color: red;\"\u003e\n  \u003cvue-loaders-ball-beat color=\"currentColor\" scale=\"1\"\u003e\u003c/vue-loaders-ball-beat\u003e\n\u003c/div\u003e\n`;\n\nnew Vue({\n  template\n}).$mount('#app');\n```\n[live example](https://codepen.io/Hokid/pen/xoaZew)\n\n```HTML\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n  \u003chead\u003e\n    \u003ctitle\u003eVueLoaders demo\u003c/title\u003e\n    \u003cscript src=\"https://unpkg.com/vue\"\u003e\u003c/script\u003e\n    \u003clink rel=\"stylesheet\" href=\"https://unpkg.com/vue-loaders/dist/vue-loaders.css\"\u003e\n    \u003cscript src=\"https://unpkg.com/vue-loaders\"\u003e\u003c/script\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003cdiv id=\"app\"\u003e\n      \u003cvue-loaders-ball-beat color=\"red\" scale=\"2\"\u003e\u003c/vue-loaders-ball-beat\u003e\n      \u003chr/\u003e\n      \u003cvue-loaders name=\"ball-beat\" color=\"red\" scale=\"2\"\u003e\u003c/vue-loaders\u003e\n    \u003c/div\u003e\n    \u003cscript\u003e\n      Vue.use(VueLoaders);\n      new Vue().$mount('#app');\n    \u003c/script\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n## Loaders\n\n|Preview|Name|Component|\n:-:|-|-|\n|![ball-beat](assets/gifs/ball-beat.gif)|ball-beat|`\u003cvue-loaders-ball-beat/\u003e`|\n|![ball-clip-rotate-multiple](assets/gifs/ball-clip-rotate-multiple.gif)|ball-clip-rotate-multiple|`\u003cvue-loaders-ball-clip-rotate-multiple/\u003e`|\n|![ball-clip-rotate-pulse](assets/gifs/ball-clip-rotate-pulse.gif)|ball-clip-rotate-pulse|`\u003cvue-loaders-ball-clip-rotate-pulse/\u003e`|\n|![ball-clip-rotate](assets/gifs/ball-clip-rotate.gif)|ball-clip-rotate|`\u003cvue-loaders-ball-clip-rotate/\u003e`|\n|![ball-grid-beat](assets/gifs/ball-grid-beat.gif)|ball-grid-beat|`\u003cvue-loaders-ball-grid-beat/\u003e`|\n|![ball-grid-pulse](assets/gifs/ball-grid-pulse.gif)|ball-grid-pulse|`\u003cvue-loaders-ball-grid-pulse/\u003e`|\n|![ball-pulse-rise](assets/gifs/ball-pulse-rise.gif)|ball-pulse-rise|`\u003cvue-loaders-ball-pulse-rise/\u003e`|\n|![ball-pulse-sync](assets/gifs/ball-pulse-sync.gif)|ball-pulse-sync|`\u003cvue-loaders-ball-pulse-sync/\u003e`|\n|![ball-pulse](assets/gifs/ball-pulse.gif)|ball-pulse|`\u003cvue-loaders-ball-pulse/\u003e`|\n|![ball-rotate](assets/gifs/ball-rotate.gif)|ball-rotate|`\u003cvue-loaders-ball-rotate/\u003e`|\n|![ball-scale-multiple](assets/gifs/ball-scale-multiple.gif)|ball-scale-multiple|`\u003cvue-loaders-ball-scale-multiple/\u003e`|\n|![ball-scale-ripple-multiple](assets/gifs/ball-scale-ripple-multiple.gif)|ball-scale-ripple-multiple|`\u003cvue-loaders-ball-scale-ripple-multiple/\u003e`|\n|![ball-scale-ripple](assets/gifs/ball-scale-ripple.gif)|ball-scale-ripple|`\u003cvue-loaders-ball-scale-ripple/\u003e`|\n|![ball-scale](assets/gifs/ball-scale.gif)|ball-scale|`\u003cvue-loaders-ball-scale/\u003e`|\n|![ball-spin-fade-loader](assets/gifs/ball-spin-fade-loader.gif)|ball-spin-fade-loader|`\u003cvue-loaders-ball-spin-fade-loader/\u003e`|\n|![ball-triangle-path](assets/gifs/ball-triangle-path.gif)|ball-triangle-path|`\u003cvue-loaders-ball-triangle-path/\u003e`|\n|![ball-zig-zag-deflect](assets/gifs/ball-zig-zag-deflect.gif)|ball-zig-zag-deflect|`\u003cvue-loaders-ball-zig-zag-deflect/\u003e`|\n|![ball-zig-zag](assets/gifs/ball-zig-zag.gif)|ball-zig-zag|`\u003cvue-loaders-ball-zig-zag/\u003e`|\n|![cube-transition](assets/gifs/cube-transition.gif)|cube-transition|`\u003cvue-loaders-cube-transition/\u003e`|\n|![line-scale-party](assets/gifs/line-scale-party.gif)|line-scale-party|`\u003cvue-loaders-line-scale-party/\u003e`|\n|![line-scale-pulse-out-rapid](assets/gifs/line-scale-pulse-out-rapid.gif)|line-scale-pulse-out-rapid|`\u003cvue-loaders-line-scale-pulse-out-rapid/\u003e`|\n|![line-scale-pulse-out](assets/gifs/line-scale-pulse-out.gif)|line-scale-pulse-out|`\u003cvue-loaders-line-scale-pulse-out/\u003e`|\n|![line-scale](assets/gifs/line-scale.gif)|line-scale|`\u003cvue-loaders-line-scale/\u003e`|\n|![line-spin-fade-loader](assets/gifs/line-spin-fade-loader.gif)|line-spin-fade-loader|`\u003cvue-loaders-line-spin-fade-loader/\u003e`|\n|![pacman](assets/gifs/pacman.gif)|pacman|`\u003cvue-loaders-pacman/\u003e`|\n|![semi-circle-spin](assets/gifs/semi-circle-spin.gif)|semi-circle-spin|`\u003cvue-loaders-semi-circle-spin/\u003e`|\n|![square-spin](assets/gifs/square-spin.gif)|square-spin|`\u003cvue-loaders-square-spin/\u003e`|\n|![triangle-skew-spin](assets/gifs/triangle-skew-spin.gif)|triangle-skew-spin|`\u003cvue-loaders-triangle-skew-spin/\u003e`|\n\n## Props\n\n`vue-loaders` component support the following props:\n\n * `name` - name of loader(see [names](#loaders)).\n * `color` - loader color. May be any [css color value](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value).\n * `scale` - loader scale. May be any [scale number](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scale)\n \n\n`vue-loaders-{loader name}` components(see [components](#loaders)) support the following props:\n\n * `color` - loader color. May be any [css color value](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value).\n * `scale` - loader scale. May be any [scale number](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scale)\n \n Examples:\n \n```html\n\u003cvue-loaders name=\"ball-beat\" color=\"black\" scale=\"1.2\"\u003e\u003c/vue-loaders\u003e\n```\n\n```html\n\u003cvue-loaders-ball-beat color=\"black\" scale=\"1\"\u003e\u003c/vue-loaders-ball-beat\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FHokid%2Fvue-loaders","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FHokid%2Fvue-loaders","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FHokid%2Fvue-loaders/lists"}