{"id":18248912,"url":"https://github.com/yujinjin/vue-loading-spin","last_synced_at":"2025-08-02T04:04:49.422Z","repository":{"id":93688167,"uuid":"139663618","full_name":"yujinjin/vue-loading-spin","owner":"yujinjin","description":"vue-loading-spin是基于VUE实现的插件，同时也支持作为组件来使用。默认加载的图标是一个svg旋转的菊花，它用的是vue的默认插槽，也可以根据实际的业务需要自定义其他图标。","archived":false,"fork":false,"pushed_at":"2021-12-06T03:44:18.000Z","size":159,"stargazers_count":14,"open_issues_count":1,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-07-29T08:44:24.462Z","etag":null,"topics":["component","loading","spin","svg","vue2","webapck3"],"latest_commit_sha":null,"homepage":"https://yujinjin.github.io/vue-loading-spin/","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/yujinjin.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":"2018-07-04T03:24:45.000Z","updated_at":"2024-08-16T03:30:46.000Z","dependencies_parsed_at":"2023-03-13T17:15:04.161Z","dependency_job_id":null,"html_url":"https://github.com/yujinjin/vue-loading-spin","commit_stats":{"total_commits":10,"total_committers":4,"mean_commits":2.5,"dds":0.5,"last_synced_commit":"f5fbea97cf0ba74ac43b8be1ca4f7cbab404e773"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/yujinjin/vue-loading-spin","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yujinjin%2Fvue-loading-spin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yujinjin%2Fvue-loading-spin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yujinjin%2Fvue-loading-spin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yujinjin%2Fvue-loading-spin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yujinjin","download_url":"https://codeload.github.com/yujinjin/vue-loading-spin/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yujinjin%2Fvue-loading-spin/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":268333976,"owners_count":24233782,"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","status":"online","status_checked_at":"2025-08-02T02:00:12.353Z","response_time":74,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["component","loading","spin","svg","vue2","webapck3"],"created_at":"2024-11-05T09:38:42.951Z","updated_at":"2025-08-02T04:04:49.413Z","avatar_url":"https://github.com/yujinjin.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"## vue-loading-spin\r\nvue-loading-spin是基于VUE实现的插件，同时也支持作为组件来使用。默认加载的图标是一个svg旋转的菊花，它用的是vue的默认插槽，也可以根据实际的业务需要自定义其他图标。\r\n\r\n## 运行项目\r\nclone项目到本地，进入项目文件夹，安装依赖\r\n\r\n```javascript\r\ngit clone https://github.com/yujinjin/vue-loading-spin.git\r\ncd loading\r\nnpm install\r\n```\r\n运行demo，会自动打开浏览器地址运行\r\n```javascript\r\nnpm run demo\r\n```\r\n编译打包项目\r\n```javascript\r\nnpm run compile\r\n```\r\n\r\n## NPM\r\n```javascript\r\nnpm install vue-loading-spin\r\n```\r\n## 依赖\r\n- VUE\r\n\r\n## 使用\r\n作为插件\r\n```javascript\r\nimport Vue from 'vue'\r\nimport Loading from 'vue-loading-spin'\r\nimport 'vue-loading-spin/dist/loading.css'\r\n\r\n// VUE use\r\nVue.use(Loading);\r\n// or with options\r\nVue.use(Loading, {\r\n    isFixed: true, // 是否固定位置，默认为true\r\n    isComponent: true, // 是否自动注册为全局组件，如果设置为false就不会注册成组件来使用\r\n\tisShowAnimation: true // 是否显示动画效果，默认为true\r\n});\r\n\r\n```\r\n```\r\n作为JS 对象\r\n```javascript\r\nimport Loading from 'vue-loading-spin'\r\nimport 'vue-loading-spin/dist/loading.css'\r\n\r\nlet loading = Loading.get({});\r\nloading.showLoading();\r\nloading.hideLoading();\r\nloading.showNetTimeout();\r\n```\r\n## 配置选项\r\n\r\n名称 | 描述 | 默认值 | 可选项\r\n---|---|---|---\r\n`isFixed` | 是否生成绝对定位的元素，相对于浏览器窗口进行定位。 | 全局属性时是：true,全局组件时是：false | `Boolean`\r\n`isShowMask` | 是否显示遮罩背景 | false | `Boolean`\r\n`autoRefresh` | 是否（点击）自动刷新 | false | `Boolean`\r\n`isShowAnimation` | 是否显示动画（fadeIn）效果 | false | `Boolean`\r\n`indicatorText` | 提示文案 | 加载中... | `String`\r\n\r\n## API\r\n###### 1. 默认实例方法\r\n默认实例方法，有三个参数，可以一个都不传。默认三个参数：isShowMask = false, autoRefresh=false, indicatorText=\"加载中...\"\r\n```javascript\r\nthis.$showLoading();\r\n```\r\n示例：\r\n\r\n![image](https://note.youdao.com/yws/public/resource/b2a61ad71011584a10dcc60987acf09a/xmlnote/8BC54633095E418EA221A48C2C7E47C6/5940)\r\n\r\n###### 2. 带有白色背景\r\n有白色背景的遮罩层\r\n\r\n```javascript\r\nthis.$showLoading(true);\r\n```\r\n示例：\r\n\r\n![image](https://note.youdao.com/yws/public/resource/b2a61ad71011584a10dcc60987acf09a/xmlnote/38EC928AC0284A6C8E12F9CD52154471/5962)\r\n###### 3. 加载超时\r\n网络请求超时，轻触自动刷新。默认实例方法有三个参数，也可以一个都不穿。默认三个参数：isShowMask = true, autoRefresh=true, indicatorText=\"网络请求超时啦，轻触自动刷新\"\r\n\r\n```javascript\r\nthis.$showNetTimeout();\r\n```\r\n示例：\r\n\r\n![image](https://note.youdao.com/yws/public/resource/b2a61ad71011584a10dcc60987acf09a/xmlnote/0FA203964B5243398133326105024666/5947)\r\n\r\n###### 4. 自定义组件\r\n作为组件来使用，其配置见文档中的“配置选项”。\r\n\r\n```html\r\n\u003cloading v-model=\"isShow\" :options=\"{'indicatorText': '列表数据正在加载中，请稍后...'}\"\u003e\u003c/loading\u003e\r\n```\r\n示例：\r\n![image](https://note.youdao.com/yws/public/resource/b2a61ad71011584a10dcc60987acf09a/xmlnote/7DBE067AD84548E2B9ADBAEA414FA43E/5949)\r\n###### 5. 隐藏\r\n隐藏加载的实例方法。\r\n\r\n```javascript\r\nthis.$hideLoading()\r\n```\r\n\r\n## 弹窗dom结构\r\n为了了解弹窗dom结构，这里把弹窗的源码贴出来，方便样式定义。\r\n\r\n```html\r\n\u003cdiv class=\"loading\" :class=\"{'mask': isShowMask, 'show': isShow, 'fadeIn': isShowAnimation, 'fixed': isFixed}\" @touchmove.stop.prevent @click.stop.prevent=\"loadingFadeClick\"\u003e\r\n\t\u003cdiv class=\"loading-content\"\u003e\r\n\t\t\u003cslot\u003e\r\n\t\t\u003cspan class=\"loading-icon progress\"\u003e\r\n\t\t\t\u003csvg viewBox=\"0 0 64 64\"\u003e\r\n\t\t\t\t\u003cg stroke-width=\"4\" stroke-linecap=\"round\"\u003e\r\n\t\t\t\t\t\u003cline y1=\"17\" y2=\"29\" transform=\"translate(32,32) rotate(180)\"\u003e\r\n\t\t\t\t\t\t\u003canimate attributeName=\"stroke-opacity\" dur=\"750ms\" values=\"1;.85;.7;.65;.55;.45;.35;.25;.15;.1;0;1\" repeatCount=\"indefinite\"\u003e\u003c/animate\u003e\r\n\t\t\t\t\t\u003c/line\u003e\r\n\t\t\t\t\t\u003cline y1=\"17\" y2=\"29\" transform=\"translate(32,32) rotate(210)\"\u003e\r\n\t\t\t\t\t\t\u003canimate attributeName=\"stroke-opacity\" dur=\"750ms\" values=\"0;1;.85;.7;.65;.55;.45;.35;.25;.15;.1;0\" repeatCount=\"indefinite\"\u003e\u003c/animate\u003e\r\n\t\t\t\t\t\u003c/line\u003e\r\n\t\t\t\t\t\u003cline y1=\"17\" y2=\"29\" transform=\"translate(32,32) rotate(240)\"\u003e\r\n\t\t\t\t\t\t\u003canimate attributeName=\"stroke-opacity\" dur=\"750ms\" values=\".1;0;1;.85;.7;.65;.55;.45;.35;.25;.15;.1\" repeatCount=\"indefinite\"\u003e\u003c/animate\u003e\r\n\t\t\t\t\t\u003c/line\u003e\r\n\t\t\t\t\t\u003cline y1=\"17\" y2=\"29\" transform=\"translate(32,32) rotate(270)\"\u003e\r\n\t\t\t\t\t\t\u003canimate attributeName=\"stroke-opacity\" dur=\"750ms\" values=\".15;.1;0;1;.85;.7;.65;.55;.45;.35;.25;.15\" repeatCount=\"indefinite\"\u003e\u003c/animate\u003e\r\n\t\t\t\t\t\u003c/line\u003e\r\n\t\t\t\t\t\u003cline y1=\"17\" y2=\"29\" transform=\"translate(32,32) rotate(300)\"\u003e\r\n\t\t\t\t\t\t\u003canimate attributeName=\"stroke-opacity\" dur=\"750ms\" values=\".25;.15;.1;0;1;.85;.7;.65;.55;.45;.35;.25\" repeatCount=\"indefinite\"\u003e\u003c/animate\u003e\r\n\t\t\t\t\t\u003c/line\u003e\r\n\t\t\t\t\t\u003cline y1=\"17\" y2=\"29\" transform=\"translate(32,32) rotate(330)\"\u003e\r\n\t\t\t\t\t\t\u003canimate attributeName=\"stroke-opacity\" dur=\"750ms\" values=\".35;.25;.15;.1;0;1;.85;.7;.65;.55;.45;.35\" repeatCount=\"indefinite\"\u003e\u003c/animate\u003e\r\n\t\t\t\t\t\u003c/line\u003e\r\n\t\t\t\t\t\u003cline y1=\"17\" y2=\"29\" transform=\"translate(32,32) rotate(0)\"\u003e\r\n\t\t\t\t\t\t\u003canimate attributeName=\"stroke-opacity\" dur=\"750ms\" values=\".45;.35;.25;.15;.1;0;1;.85;.7;.65;.55;.45\" repeatCount=\"indefinite\"\u003e\u003c/animate\u003e\r\n\t\t\t\t\t\u003c/line\u003e\r\n\t\t\t\t\t\u003cline y1=\"17\" y2=\"29\" transform=\"translate(32,32) rotate(30)\"\u003e\r\n\t\t\t\t\t\t\u003canimate attributeName=\"stroke-opacity\" dur=\"750ms\" values=\".55;.45;.35;.25;.15;.1;0;1;.85;.7;.65;.55\" repeatCount=\"indefinite\"\u003e\u003c/animate\u003e\r\n\t\t\t\t\t\u003c/line\u003e\r\n\t\t\t\t\t\u003cline y1=\"17\" y2=\"29\" transform=\"translate(32,32) rotate(60)\"\u003e\r\n\t\t\t\t\t\t\u003canimate attributeName=\"stroke-opacity\" dur=\"750ms\" values=\".65;.55;.45;.35;.25;.15;.1;0;1;.85;.7;.65\" repeatCount=\"indefinite\"\u003e\u003c/animate\u003e\r\n\t\t\t\t\t\u003c/line\u003e\r\n\t\t\t\t\t\u003cline y1=\"17\" y2=\"29\" transform=\"translate(32,32) rotate(90)\"\u003e\r\n\t\t\t\t\t\t\u003canimate attributeName=\"stroke-opacity\" dur=\"750ms\" values=\".7;.65;.55;.45;.35;.25;.15;.1;0;1;.85;.7\" repeatCount=\"indefinite\"\u003e\u003c/animate\u003e\r\n\t\t\t\t\t\u003c/line\u003e\r\n\t\t\t\t\t\u003cline y1=\"17\" y2=\"29\" transform=\"translate(32,32) rotate(120)\"\u003e\r\n\t\t\t\t\t\t\u003canimate attributeName=\"stroke-opacity\" dur=\"750ms\" values=\".85;.7;.65;.55;.45;.35;.25;.15;.1;0;1;.85\" repeatCount=\"indefinite\"\u003e\u003c/animate\u003e\r\n\t\t\t\t\t\u003c/line\u003e\r\n\t\t\t\t\t\u003cline y1=\"17\" y2=\"29\" transform=\"translate(32,32) rotate(150)\"\u003e\r\n\t\t\t\t\t\t\u003canimate attributeName=\"stroke-opacity\" dur=\"750ms\" values=\"1;.85;.7;.65;.55;.45;.35;.25;.15;.1;0;1\" repeatCount=\"indefinite\"\u003e\u003c/animate\u003e\r\n\t\t\t\t\t\u003c/line\u003e\r\n\t\t\t\t\u003c/g\u003e\r\n\t\t\t\u003c/svg\u003e\r\n\t\t\u003c/span\u003e\r\n\t\t\u003c/slot\u003e\r\n\t\t\u003cdiv class=\"indicator-text\" v-html=\"indicatorText\" v-if=\"indicatorText\"\u003e\u003c/div\u003e\r\n\t\u003c/div\u003e\r\n\u003c/div\u003e\r\n```\r\n\r\n\r\n## 最后\r\n- 如果喜欢一定要 star哈!!!（谢谢!!）\r\n\r\n- 如果有意见和问题 请在 lssues提出，我会在线解答。\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyujinjin%2Fvue-loading-spin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyujinjin%2Fvue-loading-spin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyujinjin%2Fvue-loading-spin/lists"}