[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-8849":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":16,"stars7d":16,"stars30d":17,"stars90d":16,"forks30d":16,"starsTrendScore":16,"compositeScore":18,"rankGlobal":10,"rankLanguage":10,"license":19,"archived":20,"fork":20,"defaultBranch":21,"hasWiki":22,"hasPages":22,"topics":23,"createdAt":10,"pushedAt":10,"updatedAt":38,"readmeContent":39,"aiSummary":40,"trendingCount":16,"starSnapshotCount":16,"syncStatus":41,"lastSyncTime":42,"discoverSource":43},8849,"vue-spinner","greyby\u002Fvue-spinner","greyby","vue spinners","http:\u002F\u002Fgreyby.github.io\u002Fvue-spinner\u002F",null,"Vue",1807,174,23,4,0,1,19.73,"MIT License",false,"master",true,[24,25,26,27,28,29,30,31,32,33,34,35,36,37],"css-animations","css-loaders","css-spinners","loader","loading-animations","loading-spinner","spinner","spinners","vue","vue-spinner-component","vue-spinners","vue3","vuejs","vuejs-components","2026-06-12 02:01:59","# vue-spinner\n\nA collection of loading spinners with Vue.js 3. Based on [Halogen](https:\u002F\u002Fgithub.com\u002Fyuanyan\u002Fhalogen) by [yuanyan](https:\u002F\u002Fgithub.com\u002Fyuanyan).\n\n| vue-spinner version | Vue version |\n|---------------------|-------------|\n| 3.x | Vue 3.x |\n| 1.0.4 | Vue 1.x \u002F 2.x |\n\n## [Live Demo](http:\u002F\u002Fgreyby.github.io\u002Fvue-spinner\u002F)\n\n## Installation\n\n```bash\nnpm install vue-spinner\n```\n\n## Usage\n\n### ES Module (Recommended)\n\n```js\nimport { PulseLoader } from 'vue-spinner'\n\u002F\u002F or import individually\nimport PulseLoader from 'vue-spinner\u002Fsrc\u002FPulseLoader.vue'\n```\n\n```vue\n\u003Ctemplate>\n  \u003Cpulse-loader :loading=\"loading\" :color=\"color\" :size=\"size\">\u003C\u002Fpulse-loader>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup>\nimport { ref } from 'vue'\nimport { PulseLoader } from 'vue-spinner'\n\nconst loading = ref(true)\nconst color = ref('#5dc596')\nconst size = ref('15px')\n\u003C\u002Fscript>\n```\n\n### Global Registration\n\n```js\nimport { createApp } from 'vue'\nimport { PulseLoader } from 'vue-spinner'\n\nconst app = createApp(App)\napp.component('PulseLoader', PulseLoader)\n```\n\n### Browser (UMD)\n\n```html\n\u003Cscript src=\"path\u002Fto\u002Fvue.global.js\">\u003C\u002Fscript>\n\u003Cscript src=\"path\u002Fto\u002Fvue-spinner.umd.js\">\u003C\u002Fscript>\n\u003Cscript>\n  const { PulseLoader, GridLoader } = VueSpinner\n\u003C\u002Fscript>\n```\n\n## Available Spinners\n\n```html\n\u003Cpulse-loader :loading=\"loading\" :color=\"color\" :size=\"size\">\u003C\u002Fpulse-loader>\n\u003Cgrid-loader :loading=\"loading\" :color=\"color\" :size=\"size\">\u003C\u002Fgrid-loader>\n\u003Cclip-loader :loading=\"loading\" :color=\"color\" :size=\"size\">\u003C\u002Fclip-loader>\n\u003Crise-loader :loading=\"loading\" :color=\"color\" :size=\"size\">\u003C\u002Frise-loader>\n\u003Cbeat-loader :loading=\"loading\" :color=\"color\" :size=\"size\">\u003C\u002Fbeat-loader>\n\u003Csync-loader :loading=\"loading\" :color=\"color\" :size=\"size\">\u003C\u002Fsync-loader>\n\u003Crotate-loader :loading=\"loading\" :color=\"color\" :size=\"size\">\u003C\u002Frotate-loader>\n\u003Cfade-loader :loading=\"loading\" :color=\"color\" :height=\"height\" :width=\"width\">\u003C\u002Ffade-loader>\n\u003Cpacman-loader :loading=\"loading\" :color=\"color\" :size=\"size\">\u003C\u002Fpacman-loader>\n\u003Csquare-loader :loading=\"loading\" :color=\"color\" :size=\"size\">\u003C\u002Fsquare-loader>\n\u003Cscale-loader :loading=\"loading\" :color=\"color\" :height=\"height\" :width=\"width\">\u003C\u002Fscale-loader>\n\u003Cskew-loader :loading=\"loading\" :color=\"color\" :size=\"size\">\u003C\u002Fskew-loader>\n\u003Cmoon-loader :loading=\"loading\" :color=\"color\" :size=\"size\">\u003C\u002Fmoon-loader>\n\u003Cring-loader :loading=\"loading\" :color=\"color\" :size=\"size\">\u003C\u002Fring-loader>\n\u003Cbounce-loader :loading=\"loading\" :color=\"color\" :size=\"size\">\u003C\u002Fbounce-loader>\n\u003Cdot-loader :loading=\"loading\" :color=\"color\" :size=\"size\">\u003C\u002Fdot-loader>\n```\n\n## Props\n\nAll spinners accept the following props (with defaults):\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `loading` | Boolean | `true` | Show\u002Fhide the spinner |\n| `color` | String | `'#5dc596'` | Spinner color |\n| `size` | String | varies | Spinner size (most spinners) |\n| `margin` | String | `'2px'` | Margin between elements |\n| `radius` | String | varies | Border radius |\n\nSome spinners use `height` and `width` instead of `size` (e.g., `FadeLoader`, `ScaleLoader`).\n\n## Local Development\n\n```bash\nnpm install\nnpm run dev\n```\n\n## Build\n\n```bash\nnpm run build\n```\n\nOutput: `dist\u002Fvue-spinner.es.js` (ESM) + `dist\u002Fvue-spinner.umd.js` (UMD) + `dist\u002Fvue-spinner.css`\n\n## License\n\nvue-spinner is licensed under [The MIT License](LICENSE).\n","vue-spinner 是一个基于 Vue.js 3 的加载动画组件库。该项目提供了多种样式丰富的加载指示器，支持自定义颜色、大小等属性，易于集成到 Vue 应用中。核心功能包括通过 CSS 动画实现的多种加载效果，如脉冲、网格和环形等，并且支持按需引入或全局注册的方式使用。适用于需要在数据加载、页面跳转等场景下向用户展示等待状态的各种 Web 应用程序，尤其适合追求良好用户体验的 Vue 项目。",2,"2026-06-11 03:20:01","top_language"]