[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-96208":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":9,"totalLinesOfCode":9,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":9,"subscribersCount":16,"size":16,"stars1d":16,"stars7d":16,"stars30d":16,"stars90d":16,"forks30d":16,"starsTrendScore":16,"compositeScore":17,"rankGlobal":9,"rankLanguage":9,"license":9,"archived":18,"fork":18,"defaultBranch":19,"hasWiki":18,"hasPages":18,"topics":9,"createdAt":9,"pushedAt":9,"updatedAt":20,"readmeContent":21,"aiSummary":22,"trendingCount":16,"starSnapshotCount":16,"syncStatus":23,"lastSyncTime":24,"discoverSource":25},96208,"vue-skeleton-loader","Abdulqudus001\u002Fvue-skeleton-loader","Abdulqudus001","A simple and easily customizable skeleton loader plugin for you Vue application. ",null,"https:\u002F\u002Fgithub.com\u002FAbdulqudus001\u002Fvue-skeleton-loader","Vue",115,7,1,3,0,39.71,false,"main","2026-09-20 04:01:32","# skeleton-loader-vue\n\n> Loader showing skeleton view while data is being loaded to improve UX.\n\n![Sample loader](https:\u002F\u002Fres.cloudinary.com\u002Fibnabubakre\u002Fimage\u002Fupload\u002Fv1594505356\u002Floader.gif)\n\n---\n\n## :cd: Installation\n\n* npm: `npm install skeleton-loader-vue --save`\n* yarn: `yarn add skeleton-loader-vue`\n\n## :rocket: Usage\nYou can import and register the component globally in your main.js, or import and use it in a particular component.\n\n**To register in your `main.js`**\n```javascript\nimport Vue from 'vue';\n\u002F\u002F Import the component\nimport VueSkeletonLoader from 'skeleton-loader-vue';\n\n\u002F\u002F Register the component globally\nVue.component('vue-skeleton-loader', VueSkeletonLoader);\n```\n\n**To register in your component**\n```vue\n\u003Cscript>\nimport VueSkeletonLoader from 'skeleton-loader-vue';\nexport default {\n  components: { VueSkeletonLoader },\n};\n\u003C\u002Fscript>\n```\n\n**Using loader in your `.vue` file**\n\n```vue\n\u003Ctemplate>\n  \u003Cdiv class=\"facebook-card\">\n    \u003Cvue-skeleton-loader\n      type=\"circle\"\n      :width=\"200\"\n      :height=\"200\"\n      animation=\"fade\"\n    \u002F>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n```\n\nThis would give create a circle having a width and heigth of 200px and an animation of fade.\n\n## API\n\n### Props\n\n|Prop|Type|Default|Options|Description|\n|---|---|---|---|---|\n|width|number, string|200||The is the width of the loader, and can be either a number or string. This property would be overridden if the `size` props is set|\n|height|number, string|100||The is the height of the loader, and can be either a number or string. This property would be overridden if the `size` props is set|\n|size|number,string|||This is used to give the loader the same width and height. The property would override the width and height previously set|\n|type|string|'rect'|rect, circle|This is the type of the loader. It could be circle or rectangle shaped|\n|animation|string|'wave'|fade, wave, pulse, pulse-x, pulse-y|The animation to be applied to the loader|\n|color|string|rgba(0,0,0,0.12)||The sets the color of the loader. It accepts all valid CSS colors (rgb, hsl, hex included)|\n|wave-color|string|rgba(255, 255, 255, 0.5)||The sets the color of the wave. It accepts all valid CSS colors (rgb, hsl, hex included)|\n|rounded|boolean|false||Add this prop to give a non-circle loader a border-radius 0f 8px|\n|radius|number,string|8||This is used to determine the border radius of the loader|\n\n\n## Project setup\n\n### Install dependencies\n\n* npm: `npm install`\n* yarn: `yarn`\n\n### Start Dev Server\n\n* npm: `npm run serve`\n* yarn: `yarn serve`\n\n### Compiles and minifies for production\n\n* npm: `npm run build`\n* yarn: `yarn build`\n\n### Customize configuration\n\nSee [Configuration Reference](https:\u002F\u002Fcli.vuejs.org\u002Fconfig\u002F).\n","这是一个为 Vue 应用提供可定制骨架屏（Skeleton Loader）的轻量级插件，用于在数据加载过程中显示占位 UI，提升用户等待体验。支持圆形、矩形两种基础形状，提供 fade、wave、pulse 等多种动画效果，可通过 width\u002Fheight\u002Fsize、color、radius 等 props 灵活控制尺寸、颜色与圆角。组件支持全局或局部注册，无需复杂配置即可快速集成。适用于列表、卡片、头像、详情页等需异步加载内容的 Web 场景，尤其适合中后台系统和内容型单页应用。",2,"2026-09-12 02:30:06","trending"]