{"id":13495601,"url":"https://github.com/ngneat/content-loader","last_synced_at":"2025-05-14T17:06:21.694Z","repository":{"id":31060180,"uuid":"126729199","full_name":"ngneat/content-loader","owner":"ngneat","description":"⚪️ SVG component to create placeholder loading, like Facebook cards loading. ","archived":false,"fork":false,"pushed_at":"2024-02-10T18:09:08.000Z","size":3044,"stargazers_count":732,"open_issues_count":24,"forks_count":58,"subscribers_count":16,"default_branch":"master","last_synced_at":"2025-05-07T22:35:07.188Z","etag":null,"topics":["angular","content-loader","facebook-loader","loader"],"latest_commit_sha":null,"homepage":"https://netbasal.com/","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/ngneat.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":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null},"funding":{"github":"ngneat"}},"created_at":"2018-03-25T18:49:37.000Z","updated_at":"2025-03-11T18:42:36.000Z","dependencies_parsed_at":"2024-02-16T04:44:51.547Z","dependency_job_id":null,"html_url":"https://github.com/ngneat/content-loader","commit_stats":{"total_commits":85,"total_committers":21,"mean_commits":"4.0476190476190474","dds":0.7411764705882353,"last_synced_commit":"8aa97d9bf3622d726596364393739b8b907bd824"},"previous_names":["netanelbasal/ngx-content-loader"],"tags_count":15,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ngneat%2Fcontent-loader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ngneat%2Fcontent-loader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ngneat%2Fcontent-loader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ngneat%2Fcontent-loader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ngneat","download_url":"https://codeload.github.com/ngneat/content-loader/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253866879,"owners_count":21976104,"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":["angular","content-loader","facebook-loader","loader"],"created_at":"2024-07-31T19:01:36.313Z","updated_at":"2025-05-14T17:06:21.673Z","avatar_url":"https://github.com/ngneat.png","language":"TypeScript","readme":"# Angular Content Loader\n\n[![All Contributors](https://img.shields.io/badge/all_contributors-11-orange.svg?style=flat-square)](#contributors-)\n\n\u003cp align=\"center\"\u003e\n  \u003cimg width=\"400\" alt=\"Example's react-content-loader\" src=\"https://user-images.githubusercontent.com/4838076/34308760-ec55df82-e735-11e7-843b-2e311fa7b7d0.gif\" /\u003e\n\u003c/p\u003e\n\nAngular component that uses SVG to create a collection of loaders which simulates the structure of the\ncontent that will be loaded, similar to Facebook cards loaders.\n\n[Live Demo](https://stackblitz.com/edit/ngx-content-loader)\n\n## Sponsoring ngneat\n\n[Sponsorships](https://github.com/sponsors/ngneat) aid in the continued development and maintenance of ngneat libraries. Consider asking your company to sponsor ngneat as its core to their business and application development.\n\n### Gold Sponsors\n\nElevate your support by becoming a Gold Sponsor and have your logo prominently featured on our README in the top 5 repositories.\n\n### Silver Sponsors\n\nBoost your backing by becoming a Gold Sponsor and enjoy the spotlight with your logo prominently showcased in the top 3 repositories on our README.\n\n### Bronze Sponsors\n\n\u003ca href=\"https://houseofangular.io\" target=\"_blank\"\u003e\n  \u003cimg src=\"https://github.com/ngrx/platform/blob/main/projects/ngrx.io/src/assets/images/sponsors/house-of-angular.png\" width=\"50px\" height=\"50px\" alt=\"House of Angular\" /\u003e\n\u003c/a\u003e\n\nBecome a bronze sponsor and get your logo on our README on GitHub.\n\n## Features\n\nThis is an Angular port for [react-content-loader](https://github.com/danilowoz/react-content-loader).\n\n- :gear: **Completely customizable:** you can change the colors, speed and sizes;\n- :pencil2: **Create your own loading:** use the\n  [create-react-content-loader](https://danilowoz.github.io/create-react-content-loader/) to create\n  your custom loadings easily;\n- :ok_hand: **You can use right now:** there are a lot of presets to use the loader, see the\n  [options](#examples);\n- :rocket: **Performance:** uses pure SVG to work, so it works without any extra scripts,\n  canvas, etc;\n\n\u003ca href=\"https://www.buymeacoffee.com/basalnetanel\" target=\"_blank\"\u003e\u003cimg src=\"https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png\" alt=\"Buy Me A Coffee\" style=\"height: 41px !important;width: 174px !important;box-shadow: 0px 3px 2px 0px rgba(190, 190, 190, 0.5) !important;-webkit-box-shadow: 0px 3px 2px 0px rgba(190, 190, 190, 0.5) !important;\" \u003e\u003c/a\u003e\n\n## Install\n\n### Yarn\n\n```bash\nyarn add @ngneat/content-loader\n```\n\n## Usage\n\n```ts\nimport { ContentLoaderModule } from '@ngneat/content-loader';\n\n@NgModule({\n  imports: [ContentLoaderModule]\n})\nexport class AppModule {}\n```\n\n```html\n\u003ccontent-loader\u003e\n  \u003csvg:rect x=\"0\" y=\"0\" rx=\"3\" ry=\"3\" width=\"250\" height=\"10\" /\u003e\n  \u003csvg:rect x=\"20\" y=\"20\" rx=\"3\" ry=\"3\" width=\"220\" height=\"10\" /\u003e\n  \u003csvg:rect x=\"20\" y=\"40\" rx=\"3\" ry=\"3\" width=\"170\" height=\"10\" /\u003e\n  \u003csvg:rect x=\"0\" y=\"60\" rx=\"3\" ry=\"3\" width=\"250\" height=\"10\" /\u003e\n  \u003csvg:rect x=\"20\" y=\"80\" rx=\"3\" ry=\"3\" width=\"200\" height=\"10\" /\u003e\n  \u003csvg:rect x=\"20\" y=\"100\" rx=\"3\" ry=\"3\" width=\"80\" height=\"10\" /\u003e\n\u003c/content-loader\u003e\n```\n\n\u003e Warning: Safari renders the SVG in black in case your Angular application uses the `\u003cbase href=\"/\" /\u003e` tag in the `\u003chead/\u003e` of your `index.html`.\n\u003e Refer to the input property `baseUrl` below to fix this issue.\n\n### Examples\n\n#### Facebook Style\n\n```html\n\u003cfacebook-content-loader\u003e\u003c/facebook-content-loader\u003e\n```\n\n![Facebook Style](https://user-images.githubusercontent.com/4838076/34308760-ec55df82-e735-11e7-843b-2e311fa7b7d0.gif)\n\n#### List Style\n\n```html\n\u003clist-content-loader\u003e\u003c/list-content-loader\u003e\n```\n\n![List Style](https://user-images.githubusercontent.com/4838076/36352948-b8931430-149e-11e8-9f4b-3f00bc444a6d.gif)\n\n#### Bullet list Style\n\n```html\n\u003cbullet-list-content-loader\u003e\u003c/bullet-list-content-loader\u003e\n```\n\n![Bullet list Style](https://user-images.githubusercontent.com/4838076/31998372-59817bac-b96e-11e7-8ef8-07f61670ee18.gif)\n\n## API\n\n### @Inputs\n\n| \u003cdiv style=\"width:250px\"\u003eProp name and type\u003c/div\u003e           | Environment | Description                                                                                                                                                                                                                                                                                         |\n| ----------------------------------------------------------- | ----------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| **`animate?: boolean`** \u003cbr/\u003e Defaults to `true`            | -           | Opt-out of animations with `false`                                                                                                                                                                                                                                                                  |\n| **`baseUrl?: string`**\u003cbr /\u003e Defaults to an empty string    | -           | Required if you're using `\u003cbase url=\"/\" /\u003e` document `\u003chead/\u003e`. \u003cbr/\u003eThis prop is common used as: \u003cbr/\u003e`\u003cContentLoader baseUrl={window.location.pathname} /\u003e` which will fill the SVG attribute with the relative path. Related [#93](https://github.com/danilowoz/react-content-loader/issues/93). |\n| **`speed?: number`** \u003cbr /\u003e Defaults to `1.2`               | -           | Animation speed in seconds.                                                                                                                                                                                                                                                                         |\n| **`interval?: number`** \u003cbr /\u003e Defaults to `0.25`           | -           | Interval of time between runs of the animation, \u003cbr/\u003eas a fraction of the animation speed.                                                                                                                                                                                                          |\n| **`viewBox?: string`** \u003cbr /\u003e Defaults to `undefined`       | -           | Use viewBox props to set a custom viewBox value, \u003cbr/\u003efor more information about how to use it, \u003cbr/\u003eread the article [How to Scale SVG](https://css-tricks.com/scale-svg/).                                                                                                                        |\n| **`gradientRatio?: number`** \u003cbr /\u003e Defaults to `1.2`       | -           | Width of the animated gradient as a fraction of the view box width.                                                                                                                                                                                                                                 |\n| **`rtl?: boolean`** \u003cbr /\u003e Defaults to `false`              | -           | Content right-to-left.                                                                                                                                                                                                                                                                              |\n| **`backgroundColor?: string`** \u003cbr /\u003e Defaults to `#f5f6f7` | -           | Used as background of animation.                                                                                                                                                                                                                                                                    |\n| **`foregroundColor?: string`** \u003cbr /\u003e Defaults to `#eee`    | -           | Used as the foreground of animation.                                                                                                                                                                                                                                                                |\n| **`backgroundOpacity?: number`** \u003cbr /\u003e Defaults to `1`     | -           | Background opacity (0 = transparent, 1 = opaque)\u003cbr/\u003eused to solve an issue in [Safari](#safari--ios)                                                                                                                                                                                               |\n| **`foregroundOpacity?: number`** \u003cbr /\u003e Defaults to `1`     | -           | Animation opacity (0 = transparent, 1 = opaque)\u003cbr/\u003eused to solve an issue in [Safari](#safari--ios)                                                                                                                                                                                                |\n| **`style?: CSSProperties`** \u003cbr /\u003e Defaults to `{}`         | -           |                                                                                                                                                                                                                                                                                                     |\n\n## Credits\n\nThis is basically an Angular port for [react-content-loader](https://github.com/danilowoz/react-content-loader).\n\n## License\n\nMIT \u0026copy; [NetanelBasal](https://github.com/NetanelBasal)\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --\u003e\n\u003c!-- prettier-ignore-start --\u003e\n\u003c!-- markdownlint-disable --\u003e\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://www.netbasal.com\"\u003e\u003cimg src=\"https://avatars1.githubusercontent.com/u/6745730?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eNetanel Basal\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/NetanelBasal/content-loader/commits?author=NetanelBasal\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"#content-NetanelBasal\" title=\"Content\"\u003e🖋\u003c/a\u003e \u003ca href=\"https://github.com/NetanelBasal/content-loader/commits?author=NetanelBasal\" title=\"Documentation\"\u003e📖\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://www.mapianist.com\"\u003e\u003cimg src=\"https://avatars0.githubusercontent.com/u/7777929?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eHeo\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/NetanelBasal/content-loader/commits?author=leo6104\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"http://www.andreas.ae\"\u003e\u003cimg src=\"https://avatars3.githubusercontent.com/u/2174826?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eAndreas Aeschlimann\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/NetanelBasal/content-loader/commits?author=andreas-aeschlimann\" title=\"Documentation\"\u003e📖\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/alexw10\"\u003e\u003cimg src=\"https://avatars0.githubusercontent.com/u/9453636?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003ealexw10\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/NetanelBasal/content-loader/commits?author=alexw10\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"https://github.com/NetanelBasal/content-loader/commits?author=alexw10\" title=\"Documentation\"\u003e📖\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/nonsocode\"\u003e\u003cimg src=\"https://avatars3.githubusercontent.com/u/12021370?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eChinonso Chukwuogor\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/NetanelBasal/content-loader/commits?author=nonsocode\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/wynfred\"\u003e\u003cimg src=\"https://avatars2.githubusercontent.com/u/9249564?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003ewynfred\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/NetanelBasal/content-loader/commits?author=wynfred\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://twitter.com/irustm\"\u003e\u003cimg src=\"https://avatars1.githubusercontent.com/u/16316579?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eRustam\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/NetanelBasal/content-loader/commits?author=irustm\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/gund\"\u003e\u003cimg src=\"https://avatars0.githubusercontent.com/u/3644678?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eAlex Malkevich\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/NetanelBasal/content-loader/commits?author=gund\" title=\"Documentation\"\u003e📖\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/danielsogl\"\u003e\u003cimg src=\"https://avatars2.githubusercontent.com/u/15234844?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eDaniel Sogl\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/NetanelBasal/content-loader/commits?author=danielsogl\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"#maintenance-danielsogl\" title=\"Maintenance\"\u003e🚧\u003c/a\u003e \u003ca href=\"#platform-danielsogl\" title=\"Packaging/porting to new platform\"\u003e📦\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"http://www.tailored.hu/\"\u003e\u003cimg src=\"https://avatars1.githubusercontent.com/u/9606801?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eAlex Szabó‮\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/NetanelBasal/content-loader/commits?author=kreatemore\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"http://codepen.io/donroyco/\"\u003e\u003cimg src=\"https://avatars2.githubusercontent.com/u/1763537?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eRoy\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/NetanelBasal/content-loader/commits?author=donroyco\" title=\"Documentation\"\u003e📖\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://robinvdb.me/\"\u003e\u003cimg src=\"https://avatars2.githubusercontent.com/u/3083785?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eRobin Van den Broeck\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/NetanelBasal/content-loader/commits?author=RobinVdBroeck\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n\u003c!-- markdownlint-enable --\u003e\n\u003c!-- prettier-ignore-end --\u003e\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:END --\u003e\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","funding_links":["https://github.com/sponsors/ngneat","https://www.buymeacoffee.com/basalnetanel"],"categories":["TypeScript","Table of contents"],"sub_categories":["Third Party Components"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fngneat%2Fcontent-loader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fngneat%2Fcontent-loader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fngneat%2Fcontent-loader/lists"}