{"id":15043238,"url":"https://github.com/hooray/vite-plugin-app-loading","last_synced_at":"2025-04-14T20:52:03.284Z","repository":{"id":256784844,"uuid":"856416603","full_name":"hooray/vite-plugin-app-loading","owner":"hooray","description":"Add a loading animation to your website | 给网站添加一个加载动画","archived":false,"fork":false,"pushed_at":"2025-02-28T02:36:36.000Z","size":299,"stargazers_count":12,"open_issues_count":0,"forks_count":1,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-03-28T09:04:29.877Z","etag":null,"topics":["animation","loading","loading-bar","loading-page","loading-spinner","react","spinner","vite","vue"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/vite-plugin-app-loading","language":"HTML","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/hooray.png","metadata":{"files":{"readme":"README.CN.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":"2024-09-12T14:41:44.000Z","updated_at":"2025-03-18T08:22:56.000Z","dependencies_parsed_at":"2024-09-14T12:36:16.409Z","dependency_job_id":"7e2346f1-dc92-440a-9f16-56df3f792b19","html_url":"https://github.com/hooray/vite-plugin-app-loading","commit_stats":null,"previous_names":["hooray/vite-plugin-vue-app-loading","hooray/vite-plugin-app-loading"],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hooray%2Fvite-plugin-app-loading","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hooray%2Fvite-plugin-app-loading/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hooray%2Fvite-plugin-app-loading/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hooray%2Fvite-plugin-app-loading/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hooray","download_url":"https://codeload.github.com/hooray/vite-plugin-app-loading/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248960956,"owners_count":21189990,"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","loading","loading-bar","loading-page","loading-spinner","react","spinner","vite","vue"],"created_at":"2024-09-24T20:48:44.567Z","updated_at":"2025-04-14T20:52:03.263Z","avatar_url":"https://github.com/hooray.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# vite-plugin-app-loading\n\n[![NPM version](https://img.shields.io/npm/v/vite-plugin-app-loading?color=a1b858\u0026label=)](https://www.npmjs.com/package/vite-plugin-app-loading)\n\n[English](./README.md) | **中文**\n\n给网站添加一个加载动画\n\n![vite-plugin-app-loading](https://github.com/user-attachments/assets/95217497-7022-43c1-987a-cec101db7671)\n\n## 安装\n\n```bash\nnpm i vite-plugin-app-loading -D\n```\n\n## 使用\n\n```ts\n// vite.config.ts\nimport AppLoading from 'vite-plugin-app-loading'\n\nexport default defineConfig({\n  plugins: [\n    AppLoading(),\n  ],\n})\n```\n\n在合适的时机隐藏加载动画：\n\n```ts\n// src/main.ts\nimport { loadingFadeOut } from 'virtual:app-loading'\nloadingFadeOut()\n```\n\n## 类型\n\n有两种方法可以告诉 TypeScript 虚拟导入的类型：\n\n- 在你的 `global.d.ts` 文件添加下面这句：\n\n  ```ts\n  /// \u003creference types=\"vite-plugin-app-loading/client\" /\u003e\n  ```\n\n- 在你的 `tsconfig.json` 中，将以下内容添加到你的 `compilerOptions.types` 数组中：\n\n  ```json\n  {\n    // ...\n    \"compilerOptions\": {\n      // ...\n      \"types\": [\n        \"vite-plugin-app-loading/client\"\n      ]\n    }\n  }\n  ```\n\n## 自定义动画\n\n在应用根目录创建 `loading.html` 文件：\n\n```html\n\u003cstyle\u003e\n.loader {\n  font-weight: bold;\n  font-family: sans-serif;\n  font-size: 30px;\n  animation: l1 1s linear infinite alternate;\n}\n.loader:before {\n  content:\"Loading...\"\n}\n@keyframes l1 {to{opacity: 0}}\n\u003c/style\u003e\n\u003cdiv class=\"loader\"\u003e\u003c/div\u003e\n```\n\n```ts\n// vite.config.ts\nimport AppLoading from 'vite-plugin-app-loading'\n\nexport default defineConfig({\n  plugins: [\n    AppLoading('loading.html'),\n  ],\n})\n```\n\n![](https://github.com/user-attachments/assets/b05f8157-2f06-44af-b8bb-fa53701daf29)\n\n\u003e [!TIP]\n\u003e 你可以从下列网站中找找灵感，它们都提供了纯 CSS 的加载动画，非常适合搭配本插件一起使用。\n\u003e\n\u003e - [CSS Loaders](https://css-loaders.com/)\n\u003e - [CSS Loader Generator](https://10015.io/tools/css-loader-generator)\n\u003e - [Loaders](https://cssloaders.github.io/)\n\n## 范例\n\n[Fantastic-admin](https://github.com/fantastic-admin/basic)\n\n## 致谢\n\n感谢 [vue-vben-admin](https://github.com/vbenjs/vue-vben-admin/tree/7bcb973d6595545e2cef6ad4006d781b3176f67b/internal/vite-config/src/plugins/inject-app-loading) 提供的灵感。\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhooray%2Fvite-plugin-app-loading","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhooray%2Fvite-plugin-app-loading","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhooray%2Fvite-plugin-app-loading/lists"}