{"id":30347999,"url":"https://github.com/willmendesneto/vue-skeleton-content-loader","last_synced_at":"2025-08-18T17:30:23.129Z","repository":{"id":298161220,"uuid":"999098726","full_name":"willmendesneto/vue-skeleton-content-loader","owner":"willmendesneto","description":"Make beautiful, animated loading skeletons that automatically adapt to your Vue apps","archived":false,"fork":false,"pushed_at":"2025-06-13T13:21:24.000Z","size":444,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-08-09T18:48:52.889Z","etag":null,"topics":["animation","content","content-loader","facebook-loader","ghost","instagram-loader","loader","loading","module","package","screen","skeleton","skeleton-animation","skeleton-loader","ui","vue","vue-loader","vue-skeleton","vue-skeleton-content-loader","vue-skeleton-loader"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/willmendesneto.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-06-09T18:28:08.000Z","updated_at":"2025-06-27T18:06:08.000Z","dependencies_parsed_at":"2025-06-09T18:49:56.114Z","dependency_job_id":"ae3e7ac4-ca8d-46a7-8940-4cc10165cf12","html_url":"https://github.com/willmendesneto/vue-skeleton-content-loader","commit_stats":null,"previous_names":["willmendesneto/vue-skeleton-content-loader"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/willmendesneto/vue-skeleton-content-loader","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/willmendesneto%2Fvue-skeleton-content-loader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/willmendesneto%2Fvue-skeleton-content-loader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/willmendesneto%2Fvue-skeleton-content-loader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/willmendesneto%2Fvue-skeleton-content-loader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/willmendesneto","download_url":"https://codeload.github.com/willmendesneto/vue-skeleton-content-loader/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/willmendesneto%2Fvue-skeleton-content-loader/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":271029764,"owners_count":24687486,"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-18T02:00:08.743Z","response_time":89,"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":["animation","content","content-loader","facebook-loader","ghost","instagram-loader","loader","loading","module","package","screen","skeleton","skeleton-animation","skeleton-loader","ui","vue","vue-loader","vue-skeleton","vue-skeleton-content-loader","vue-skeleton-loader"],"created_at":"2025-08-18T17:30:17.601Z","updated_at":"2025-08-18T17:30:23.097Z","avatar_url":"https://github.com/willmendesneto.png","language":"TypeScript","funding_links":[],"categories":["Components \u0026 Libraries"],"sub_categories":["UI Components"],"readme":"# Vue Skeleton Content Loader\n\n[![npm downloads](https://img.shields.io/npm/dm/vue-skeleton-content-loader.svg)](https://npmjs.org/vue-skeleton-content-loader)\n[![npm](https://img.shields.io/badge/stackblitz-online-orange.svg)](https://stackblitz.com/edit/vue-skeleton-content-loader-sample)\n[![npm](https://img.shields.io/badge/stackblitz-online-orange.svg)](https://stackblitz.com/edit/vue-skeleton-content-loader-user-card-component-sample)\n\n[![NPM](https://nodei.co/npm/vue-skeleton-content-loader.png?downloads=true\u0026downloadRank=true\u0026stars=true)](https://npmjs.org/vue-skeleton-content-loader)\n[![NPM](https://nodei.co/npm-dl/vue-skeleton-content-loader.png?height=3\u0026months=3)](https://npmjs.org/vue-skeleton-content-loader)\n\n[![Build Status](https://circleci.com/gh/willmendesneto/vue-skeleton-content-loader.svg?style=shield)](https://circleci.com/gh/willmendesneto/vue-skeleton-content-loader)\n[![Coverage Status](https://coveralls.io/repos/willmendesneto/vue-skeleton-content-loader/badge.svg?branch=main)](https://coveralls.io/r/willmendesneto/vue-skeleton-content-loader?branch=main)\n[![npm bundle size (minified + gzip)](https://img.shields.io/bundlephobia/minzip/vue-skeleton-content-loader.svg)](https://bundlephobia.com/result?p=vue-skeleton-content-loader)\n[![npm](https://img.shields.io/npm/l/express.svg?maxAge=2592000)](/LICENSE)\n\n\u003c!-- ![vue-skeleton-content-loader in action](https://user-images.githubusercontent.com/1252570/50053778-d4e0d900-018e-11e9-9de7-fad6f9fddd9e.gif) --\u003e\n\n## Why skeletons?\n\nThe idea of this component is to make the process transparent and easier. So the main point is to integrate this component with other tooling processes, such as:\n\n- Server-side rendering;\n- Progressive rendering;\n- Any other that you like :)\n\nIt's totally transparent for you and you can integrate it easily into your application, improving your user experience 🎉\n\n- [Demo](#demo)\n- [Install](#install)\n- [Usage](#usage)\n- [Development](#development)\n- [Contribute](#contribute)\n\n## Demo\n\nTry out our demos on Stackblitz!\n\n- [Usage: animations, appearance, and themes](https://vue-skeleton-content-loader-sample.stackblitz.io)\n- [User Card Component Loading simulation using Vue Skeleton Loader](https://vue-skeleton-content-loader-user-card-component-sample.stackblitz.io)\n\n## Install\n\nYou can get it on NPM by installing the `vue-skeleton-content-loader` module as a project dependency.\n\n```shell\nnpm install vue-skeleton-content-loader --save\n```\n\n## Usage\n\n### Basic Usage - Local import\n\nTo use `VueSkeletonContentLoader` in your Vue application, you first need to import it into your component's script section.\n\n```typescript\n// YourComponent.vue\n\u003cscript setup lang=\"ts\"\u003e\nimport { VueSkeletonContentLoader } from 'vue-skeleton-content-loader';\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cdiv class=\"item\"\u003e\n    \u003cp\u003eCircle Skeleton\u003c/p\u003e\n    \u003cVueSkeletonContentLoader count=\"5\" appearance=\"circle\" /\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"item\"\u003e\n    \u003cp\u003eLine Skeleton\u003c/p\u003e\n    \u003cVueSkeletonContentLoader count=\"5\" appearance=\"line\" /\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"item\"\u003e\n    \u003cp\u003eSquare Skeleton\u003c/p\u003e\n    \u003cVueSkeletonContentLoader count=\"5\" appearance=\"square\" /\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n```\n\n### Global Registration - Component register via app boostrap file\n\nFor global availability across your application, you can register `VueSkeletonContentLoader` when you create your Vue app instance.\n\n```typescript\n// main.ts or main.js\nimport { createApp } from 'vue';\nimport App from './App.vue';\n// Note: import default export for global registration\nimport VueSkeletonContentLoader from 'vue-skeleton-content-loader';\n\nconst app = createApp(App);\n// Register globally\napp.component('VueSkeletonContentLoader', VueSkeletonContentLoader);\napp.mount('#app');\n```\n\nAfter global registration, you can use `\u003cVueSkeletonContentLoader\u003e` directly in any component's template without explicit import.\n\n### Props\n\n`VueSkeletonContentLoader` accepts several props to customize its behavior and appearance:\n\n- `count` - _default_ `1`: Number of skeleton lines/shapes to render.\n- `animation` - _default_ `progress`: Defines the CSS animation. See [Animations](#animations) for options.\n- `appearance` - _default_ `line`: Defines the shape of the skeleton. See [Appearance](#appearance) for options.\n- `theme` - _default_ `null`: An object containing CSS styles to apply to the skeleton. See [Theming](#theming) for details.\n- `size` - _default_ `null`: A number to be passed for the component if `appearance` is `square`. Uses `pixel` as default unit and accepts as number or number with `px` suffix. E.G: `40` or `40px`\n- `loadingText` - _default_ `Loading...`: attribute that defines the text value for `aria-valuetext` attribute. Defaults to \"Loading...\"\n- `aria-label` - _default_ `loading`: you can add `ariaLabel` as input of the component to set a different value.\n\n## Appearance\n\nYou can also define which appearance you want to use in your skeleton loader by passing the options in your component via the `:appearance` prop.\n\n### Options\n\n- `''` - _default_: it will use it `''` as appearance. At the end, it will render like a line;\n- `line`: it will render like a line. This is the same behavior as passing an empty string;\n- `circle`: it will use `circle` as appearance. Great for avatar skeletons, for example :);\n- `square`: it will use `square` as appearance and render it appropriately. Great for cards and images, for example;\n- `custom-content`: it will NOT add any appearance. Great for custom content, such as SVG, internal components and such. Although not rendering appearance, animation will be added unless component has `animation=\"false\"` prop;\n\n## Animations\n\nYou can also define which CSS animation you want to use - even not use any, if it's the case - in your skeleton loader by passing the options in your component via the `:animation` prop.\n\n### Options\n\n- `\"false\"`|`false`: it will disable the animation. Component will receive `false` as string when `animation` prop is not using binding;\n- `progress` - _default_: it will use it `progress` as animation;\n- `progress-dark`: it will use it `progress-dark` as animation. Recommended if your color schema is darken;\n- `pulse`: it will use `pulse` as animation;\n- `pulse-dark`: it will use it `pulse-dark` as animation. Recommended if your color schema is darken;\n\n\u003e `progress` is the default animation, used as the single one previously. If you don't pass the animation attribute, it defaults to `progress`.\n\n```html\n\u003ctemplate\u003e\n  \u003cdiv class=\"item\"\u003e\n    \u003c!-- Disables the animation --\u003e\n    \u003cVueSkeletonContentLoader animation=\"false\" /\u003e\n    \u003cVueSkeletonContentLoader :animation=\"false\" /\u003e\n    \u003c!-- Disables the animation, but receiving boolean value from binding --\u003e\n    \u003c!-- Via binding it can receive `false` (boolean), \"false\" (string), or any other animation type --\u003e\n    \u003cVueSkeletonContentLoader :animation=\"classAttributeWithBooleanFalseValue\" /\u003e\n    \u003c!-- Uses `progress` as animation --\u003e\n    \u003cVueSkeletonContentLoader animation=\"progress\" /\u003e\n    \u003cVueSkeletonContentLoader /\u003e\n    \u003c!-- Uses `pulse` as animation --\u003e\n    \u003cVueSkeletonContentLoader animation=\"pulse\" /\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n```\n\n\u003e You can check the code details in the [Stackblitz Live Demo Link](https://stackblitz.com/edit/vue-skeleton-content-loader-sample?file=app%2Fapp.component.html)\n\n## Theming\n\nYou can also define different styles for the skeleton loader by passing an object with the css styles - in dashed case - into the component via the `:theme` prop.\n\n```html\n\u003ctemplate\u003e\n  \u003c!--\n  If you need to change all the background wrapper\n  you need to apply the style changes on the\n  `vue-skeleton-content-loader` component wrapper\n  --\u003e\n\n  \u003cdiv style=\"background: #FF0001; padding: 10px;\"\u003e\n    \u003cVueSkeletonContentLoader\n      count=\"5\"\n      :theme=\"{\n        'border-radius': '5px',\n        height: '50px',\n        'background-color': '#992929',\n        border: '1px solid white'\n      }\"\n    /\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n```\n\nThe `:theme` prop now accepts the same configuration as Vue's `v-bind:style` directive. That means you can manage to use it like you're doing with the built-in directive, having a pleasant and beautiful experience.\n\n```html\n\u003ctemplate\u003e\n  \u003c!--\n  Note that we are using a combination of styles inside theme object,\n  having `height.px` receiving a number and `background-color` receiving a HEX Color\n  --\u003e\n  \u003cdiv style=\"background: #FF0001; padding: 10px;\"\u003e\n    \u003cVueSkeletonContentLoader\n      count=\"5\"\n      :theme=\"{\n        'height': `50px`,\n        'background-color': '#992929'\n      }\"\n    /\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n```\n\n\u003e You should change the styles on the skeleton wrapper element in case you need to change the background color. You can check the code details in the [Stackblitz Live Demo Link](https://stackblitz.com/edit/vue-skeleton-content-loader-sample?file=app%2Fapp.component.html) or check out a content load simulation [in this Stackblitz Live Demo Link](https://stackblitz.com/edit/vue-skeleton-content-loader-user-card-component-sample?file=app%2Fapp.component.html)\n\n## Development\n\n### Run demo locally\n\n1. This project uses [Vite](https://vitejs.dev/) as base. That means you just need to run `npm run dev` and access the link `http://localhost:3000` (or whatever port Vite assigns) in your browser.\n\n### Run tests\n\n1. Run `npm test` to run tests. In case you want to test using watch, please use `npm run tdd`.\n\n## Contribute\n\nFor any type of contribution, please follow the instructions in [CONTRIBUTING.md](https://github.com/willmendesneto/vue-skeleton-content-loader/blob/main/CONTRIBUTING.md) and read [CODE_OF_CONDUCT.md](https://github.com/willmendesneto/vue-skeleton-content-loader/blob/main/CODE_OF_CONDUCT.md) and [PUBLISHING_HOTFIX.md](https://github.com/willmendesneto/vue-skeleton-content-loader/blob/main/PUBLISHING_HOTFIX.md) files.\n\n## Author\n\n**Wilson Mendes (willmendesneto)**\n\n- \u003chttps://instagram.com/willmendesneto\u003e\n- \u003chttp://github.com/willmendesneto\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwillmendesneto%2Fvue-skeleton-content-loader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwillmendesneto%2Fvue-skeleton-content-loader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwillmendesneto%2Fvue-skeleton-content-loader/lists"}