{"id":13459169,"url":"https://github.com/egoist/vue-content-loader","last_synced_at":"2025-05-13T22:09:54.481Z","repository":{"id":30853797,"uuid":"126184549","full_name":"egoist/vue-content-loader","owner":"egoist","description":"SVG component to create placeholder loading, like Facebook cards loading.","archived":false,"fork":false,"pushed_at":"2024-02-23T12:25:19.000Z","size":1867,"stargazers_count":3047,"open_issues_count":7,"forks_count":135,"subscribers_count":25,"default_branch":"master","last_synced_at":"2025-05-07T19:01:58.262Z","etag":null,"topics":["component","loading","placeholder","svg","vue"],"latest_commit_sha":null,"homepage":"https://create-content-loader.now.sh/","language":"JavaScript","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/egoist.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","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},"funding":{"github":"egoist"}},"created_at":"2018-03-21T13:39:59.000Z","updated_at":"2025-04-29T07:32:46.000Z","dependencies_parsed_at":"2024-01-02T23:28:43.927Z","dependency_job_id":"358a259f-efd0-4746-b561-9b91ad5366f4","html_url":"https://github.com/egoist/vue-content-loader","commit_stats":{"total_commits":277,"total_committers":13,"mean_commits":"21.307692307692307","dds":0.703971119133574,"last_synced_commit":"75224c248a28afa678ea9de8244a3c9a6e481839"},"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/egoist%2Fvue-content-loader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/egoist%2Fvue-content-loader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/egoist%2Fvue-content-loader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/egoist%2Fvue-content-loader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/egoist","download_url":"https://codeload.github.com/egoist/vue-content-loader/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254036831,"owners_count":22003654,"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":["component","loading","placeholder","svg","vue"],"created_at":"2024-07-31T09:01:07.960Z","updated_at":"2025-05-13T22:09:54.410Z","avatar_url":"https://github.com/egoist.png","language":"JavaScript","funding_links":["https://github.com/sponsors/egoist"],"categories":["JavaScript","Components \u0026 Libraries","VUEJS","UI Components [🔝](#readme)","✨ 微交互组件"],"sub_categories":["UI Components","Scroll, Barra de Rolagem","骨架屏与占位符"],"readme":"# vue-content-loader\n\n[![NPM version](https://img.shields.io/npm/v/vue-content-loader.svg?style=flat)](https://npmjs.com/package/vue-content-loader) [![NPM downloads](https://img.shields.io/npm/dm/vue-content-loader.svg?style=flat)](https://npmjs.com/package/vue-content-loader) [![CircleCI](https://circleci.com/gh/egoist/vue-content-loader/tree/master.svg?style=shield)](https://circleci.com/gh/egoist/vue-content-loader/tree/master)\n\nSVG component to create placeholder loading, like Facebook cards loading.\n\n![preview](https://user-images.githubusercontent.com/4838076/34308760-ec55df82-e735-11e7-843b-2e311fa7b7d0.gif)\n\n## Features\n\nThis is a Vue port for [react-content-loader](https://github.com/danilowoz/react-content-loader).\n\n- Completely customizable: you can change the colors, speed and sizes.\n- Create your own loading: use the [online tool](https://create-content-loader.now.sh/) to create your custom loader easily.\n- You can use it right now: there are a lot of presets already.\n- Performance:\n  - Tree-shakable and highly optimized bundle.\n  - Pure SVG, so it's works without any javascript, canvas, etc.\n  - Pure functional components.\n\n## Install\n\n⚠️ **The latest version is compatible with Vue 3 only.** For Vue 2 \u0026 Nuxt 2, use `vue-content-loader@^0.2` instead.\n\nWith npm:\n\n```bash\nnpm i vue-content-loader\n```\n\nOr with yarn:\n\n```bash\nyarn add vue-content-loader\n```\n\nCDN: [UNPKG](https://unpkg.com/vue-content-loader/) | [jsDelivr](https://cdn.jsdelivr.net/npm/vue-content-loader/) (available as `window.contentLoaders`)\n\n## Usage\n\n👀👉 Demo: [CodeSandbox](https://codesandbox.io/s/vue-content-loader-igfyf?file=/src/App.vue)\n\n```vue\n\u003ctemplate\u003e\n  \u003ccontent-loader\u003e\u003c/content-loader\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport { ContentLoader } from 'vue-content-loader'\n\nexport default {\n  components: {\n    ContentLoader,\n  },\n}\n\u003c/script\u003e\n```\n\n### Built-in loaders\n\n```js\nimport {\n  ContentLoader,\n  FacebookLoader,\n  CodeLoader,\n  BulletListLoader,\n  InstagramLoader,\n  ListLoader,\n} from 'vue-content-loader'\n```\n\n`ContentLoader` is a meta loader while other loaders are just higher-order components of it. By default `ContentLoader` only displays a simple rectangle, here's how you can use it to create custom loaders:\n\n```vue\n\u003cContentLoader viewBox=\"0 0 250 110\"\u003e\n  \u003crect x=\"0\" y=\"0\" rx=\"3\" ry=\"3\" width=\"250\" height=\"10\" /\u003e\n  \u003crect x=\"20\" y=\"20\" rx=\"3\" ry=\"3\" width=\"220\" height=\"10\" /\u003e\n  \u003crect x=\"20\" y=\"40\" rx=\"3\" ry=\"3\" width=\"170\" height=\"10\" /\u003e\n  \u003crect x=\"0\" y=\"60\" rx=\"3\" ry=\"3\" width=\"250\" height=\"10\" /\u003e\n  \u003crect x=\"20\" y=\"80\" rx=\"3\" ry=\"3\" width=\"200\" height=\"10\" /\u003e\n  \u003crect x=\"20\" y=\"100\" rx=\"3\" ry=\"3\" width=\"80\" height=\"10\" /\u003e\n\u003c/ContentLoader\u003e\n```\n\nThis is also how [ListLoader](./src/ListLoader.js) is created.\n\nYou can also use the [online tool](http://danilowoz.com/create-vue-content-loader/) to create shapes for your custom loader.\n\n## API\n\n### Props\n\n| Prop                | Type           | Default                                  | Description                                                                                                                                                                                                                                                                                                 |\n| ------------------- | -------------- | ---------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| width               | number, string |                                          | SVG width in pixels without unit                                                                                                                                                                                                                                                                            |\n| height              | number, string |                                          | SVG height in pixels without unit                                                                                                                                                                                                                                                                           |\n| viewBox             | string         | `'0 0 ${width ?? 400} ${height ?? 130}'` | See [SVG viewBox](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox) attribute                                                                                                                                                                                                             |\n| preserveAspectRatio | string         | `'xMidYMid meet'`                        | See [SVG preserveAspectRatio](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/preserveAspectRatio) attribute                                                                                                                                                                                     |\n| speed               | number         | `2`                                      | Animation speed                                                                                                                                                                                                                                                                                             |\n| primaryColor        | string         | `'#f9f9f9'`                              | Background color                                                                                                                                                                                                                                                                                            |\n| secondaryColor      | string         | `'#ecebeb'`                              | Highlight color                                                                                                                                                                                                                                                                                             |\n| uniqueKey           | string         | `randomId()`                             | Unique ID, you need to make it consistent for SSR                                                                                                                                                                                                                                                           |\n| animate             | boolean        | `true`                                   |                                                                                                                                                                                                                                                                                                             |\n| baseUrl             | string         | empty string                             | Required if you're using `\u003cbase url=\"/\" /\u003e` in your `\u003chead /\u003e`. Defaults to an empty string. This prop is common used as: `\u003ccontent-loader :base-url=\"$route.fullPath\" /\u003e` which will fill the SVG attribute with the relative path. Related [#14](https://github.com/egoist/vue-content-loader/issues/14). |\n| primaryOpacity      | number         | `1`                                      | Background opacity (0 = transparent, 1 = opaque) used to solve an issue in Safari                                                                                                                                                                                                                           |\n| secondaryOpacity    | number         | `1`                                      | Background opacity (0 = transparent, 1 = opaque) used to solve an issue in Safari                                                                                                                                                                                                                           |\n\n## Examples\n\n### Responsiveness\n\nTo create a responsive loader that will follow its parent container width, use only the `viewBox` attribute to set the ratio:\n\n```vue\n\u003cContentLoader viewBox=\"0 0 300 200\"\u003e\n  \u003c!-- ... --\u003e\n\u003c/ContentLoader\u003e\n```\n\nTo create a loader with fixed dimensions, use `width` and `height` attributes:\n\n```vue\n\u003cContentLoader width=\"300\" height=\"200\"\u003e\n  \u003c!-- ... --\u003e\n\u003c/ContentLoader\u003e\n```\n\nNote: the exact behavior might be different depending on the CSS you apply to SVG elements.\n\n## Credits\n\nThis is basically a Vue port for [react-content-loader](https://github.com/danilowoz/react-content-loader).\n\n[Thanks to @alidcastano for transferring the package name to me.](https://github.com/egoist/vue-content-loader/issues/1) 😘\n\n## License\n\nMIT \u0026copy; [EGOIST](https://github.com/egoist)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fegoist%2Fvue-content-loader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fegoist%2Fvue-content-loader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fegoist%2Fvue-content-loader/lists"}