{"id":13808685,"url":"https://github.com/willmendesneto/ngx-skeleton-loader","last_synced_at":"2025-05-14T05:10:35.082Z","repository":{"id":37677356,"uuid":"161850030","full_name":"willmendesneto/ngx-skeleton-loader","owner":"willmendesneto","description":"Make beautiful, animated loading skeletons that automatically adapt to your Angular apps","archived":false,"fork":false,"pushed_at":"2025-05-07T09:49:05.000Z","size":2074,"stargazers_count":601,"open_issues_count":4,"forks_count":54,"subscribers_count":9,"default_branch":"main","last_synced_at":"2025-05-12T12:13:50.780Z","etag":null,"topics":["angular","animation","content-loader","facebook-loader","ghost","hacktoberfest","loader","loading","loading-animations","ngx","ngx-skeleton-loader","skeleton","skeleton-animation","skeleton-loader"],"latest_commit_sha":null,"homepage":"https://ngx-skeleton-loader-sample.stackblitz.io","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":"2018-12-14T23:12:04.000Z","updated_at":"2025-05-10T16:21:13.000Z","dependencies_parsed_at":"2023-09-28T23:24:00.487Z","dependency_job_id":"356c5394-bc08-4880-b72d-296dc907de67","html_url":"https://github.com/willmendesneto/ngx-skeleton-loader","commit_stats":{"total_commits":239,"total_committers":14,"mean_commits":"17.071428571428573","dds":0.3096234309623431,"last_synced_commit":"d2ced7877bd95c72a7318919e6551e51c76add86"},"previous_names":[],"tags_count":46,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/willmendesneto%2Fngx-skeleton-loader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/willmendesneto%2Fngx-skeleton-loader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/willmendesneto%2Fngx-skeleton-loader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/willmendesneto%2Fngx-skeleton-loader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/willmendesneto","download_url":"https://codeload.github.com/willmendesneto/ngx-skeleton-loader/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253736099,"owners_count":21955784,"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","animation","content-loader","facebook-loader","ghost","hacktoberfest","loader","loading","loading-animations","ngx","ngx-skeleton-loader","skeleton","skeleton-animation","skeleton-loader"],"created_at":"2024-08-04T01:01:49.185Z","updated_at":"2025-05-14T05:10:35.053Z","avatar_url":"https://github.com/willmendesneto.png","language":"TypeScript","funding_links":[],"categories":["Third Party Components"],"sub_categories":["Loaders"],"readme":"# NGX Skeleton loader\n\n[![npm downloads](https://img.shields.io/npm/dm/ngx-skeleton-loader.svg)](https://npmjs.org/ngx-skeleton-loader)\n[![npm](https://img.shields.io/badge/stackblitz-online-orange.svg)](https://stackblitz.com/edit/ngx-skeleton-loader-sample)\n[![npm](https://img.shields.io/badge/stackblitz-online-orange.svg)](https://stackblitz.com/edit/ngx-skeleton-loader-user-card-component-sample)\n\n[![NPM](https://nodei.co/npm/ngx-skeleton-loader.png?downloads=true\u0026downloadRank=true\u0026stars=true)](https://npmjs.org/ngx-skeleton-loader)\n[![NPM](https://nodei.co/npm-dl/ngx-skeleton-loader.png?height=3\u0026months=3)](https://npmjs.org/ngx-skeleton-loader)\n\n[![Build Status](https://circleci.com/gh/willmendesneto/ngx-skeleton-loader.svg?style=shield)](https://circleci.com/gh/willmendesneto/ngx-skeleton-loader)\n[![Coverage Status](https://coveralls.io/repos/willmendesneto/ngx-skeleton-loader/badge.svg?branch=main)](https://coveralls.io/r/willmendesneto/ngx-skeleton-loader?branch=main)\n[![npm bundle size (minified + gzip)](https://img.shields.io/bundlephobia/minzip/ngx-skeleton-loader.svg)](https://bundlephobia.com/result?p=ngx-skeleton-loader)\n[![npm](https://img.shields.io/npm/l/express.svg?maxAge=2592000)](/LICENSE)\n\n![ngx-skeleton-loader in action](https://user-images.githubusercontent.com/1252570/50053778-d4e0d900-018e-11e9-9de7-fad6f9fddd9e.gif)\n\n## Why skeletons?\n\n\u003e If you want to get more details about that, please read [\"NGX-Skeleton-Loader — States, Animations, Performance, and Accessibility for your Angular App\"](https://willmendesneto.com/posts/ngx-skeleton-loader-states-animations-performance-and-accessibility-for-your-angular-app) blog post\n\nThe idea of this component is make the process transparent and easier. So the main point is integrate this component with other tooling process, 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 easier in your application, improving your user experience 🎉\n\n- [Demo](#demo)\n- [Install](#install)\n- [Setup](#setup)\n- [Development](#development)\n- [Contribute](#contribute)\n\n## Demo\n\nTry out our demos on Stackblitz!\n\n- [Usage: animations, appearance, and themes](https://ngx-skeleton-loader-sample.stackblitz.io)\n- [User Card Component Loading simulation using NGX Skeleton Loader](https://ngx-skeleton-loader-user-card-component-sample.stackblitz.io)\n\n## Install\n\nYou can get it on NPM installing `ngx-skeleton-loader` module as a project dependency.\n\n```shell\nnpm install ngx-skeleton-loader --save\n```\n\n## Setup\n\n## Standalone Setup\n\nAdd `ngx-skeleton-loader` to your application's `app.config.ts` providers.\n\n```typescript\n// app.config.ts\n\nimport { ApplicationConfig } from '@angular/core';\nimport { provideNgxSkeletonLoader } from 'ngx-skeleton-loader';\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideNgxSkeletonLoader({\n      theme: {\n        extendsFromRoot: true,\n        height: '30px',\n      },\n    }),\n  ]\n};\n```\n\nAfter that, you can use the `ngx-skeleton-loader` component in your templates. Optionally you can pass configuration data into the component itself\n\n- `ngx-skeleton-loader`: Handle the skeleton animation and the skeleton styles of your app;\n\n```html\n\u003cdiv class=\"item\"\u003e\n  \u003cngx-skeleton-loader count=\"5\" appearance=\"circle\" /\u003e\n\u003c/div\u003e\n```\n\n## NgModule Setup\n\nYou'll need to add `NgxSkeletonLoaderModule` to your application module. So that, the `\u003cngx-skeleton-loader\u003e` components will be accessible in your application.\n\n```typescript\n...\nimport { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';\n...\n\n@NgModule({\n  declarations: [\n    YourAppComponent\n  ],\n  imports: [\n    ...\n    NgxSkeletonLoaderModule,\n    ...\n  ],\n  providers: [],\n  bootstrap: [YourAppComponent]\n})\n\nexport class YourAppComponent {}\n\n```\n\nAfter that, you can use the `ngx-skeleton-loader` components in your templates, passing the configuration data into the component itself.\n\n- `ngx-skeleton-loader`: Handle the skeleton animation and the skeleton styles of your app;\n\n```html\n\u003cdiv class=\"item\"\u003e\n  \u003cngx-skeleton-loader count=\"5\" appearance=\"circle\" /\u003e\n\u003c/div\u003e\n```\n\n### Using `NgxSkeletonLoaderModule.forRoot()`\n\nAlso, you can import the module in your app by calling `NgxSkeletonLoaderModule.forRoot()` when adding it. So it will be available across your Angular application.\n\nImporting the module this way also allows you to globally configure the default values for the `ngx-skeleton-loader` components in your application, in case you need some different default values for your app.\n\n```typescript\n...\nimport { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';\n...\n\n@NgModule({\n  declarations: [\n    YourAppComponent\n  ],\n  imports: [\n    ...\n    NgxSkeletonLoaderModule.forRoot({ animation: 'pulse', loadingText: 'This item is actually loading...' }),\n    ...\n  ],\n  providers: [],\n  bootstrap: [YourAppComponent]\n})\n\nexport class YourAppComponent {}\n\n```\n\n```html\n\u003cdiv class=\"item\"\u003e\n  \u003cngx-skeleton-loader count=\"5\" appearance=\"circle\" /\u003e\n  \u003c!-- above line will produce the rendering of 5 circles with the pulse animation and the aria-valuetext attribute set with \"This item is actually loading...\" --\u003e\n\u003c/div\u003e\n```\n\n#### Extending `theme` via `NgxSkeletonLoaderModule.forRoot()`\n\n\u003e By default when using `NgxSkeletonLoaderModule.forRoot({ theme: /* ...list of CSS atributes */} })` the application is using this value as source of truth, overriding any local theming passed to `\u003cngx-skeleton-loader\u003e` component via `[theme]` input. Check these steps in case you need to change this behaviour in your app\n\nThis method is also accepting the option of having a global theme and local theme inputs. You can enable it by passing `NgxSkeletonLoaderModule.forRoot({ theme: { extendsFromRoot: true, /* ...list of CSS atributes */} })` in your module. Quite simple, right? 😄\n\nBy using that configuration in your application, you should also be aware that:\n\n- By default, every `\u003cngx-skeleton-loader\u003e` component will use `theme` coming from `NgxSkeletonLoaderModule.forRoot()` as the source of truth\n- If there's any CSS attribute on the component locally which overrides the CSS spec, it combines both themes, but overriding global CSS attributes in favor of local ones.\n\nAs an example:\n\n```typescript\n...\nimport { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';\n...\n\n@NgModule({\n  declarations: [\n    YourAppComponent\n  ],\n  imports: [\n    ...\n    NgxSkeletonLoaderModule.forRoot({\n      theme: {\n        // Enabliong theme combination\n        extendsFromRoot: true,\n        // ... list of CSS theme attributes\n        height: '30px',\n      },\n    }),\n    ...\n  ],\n  providers: [],\n  bootstrap: [YourAppComponent]\n})\n\nexport class YourAppComponent {}\n\n```\n\n```html\n\u003cdiv class=\"item\"\u003e\n  \u003cngx-skeleton-loader /\u003e\n  \u003c!-- above line will produce a skeleton component using `height: 30px;`\" --\u003e\n  \u003cngx-skeleton-loader [theme]=\"{background: 'blue'}\" /\u003e\n  \u003c!-- above line will produce a skeleton component using `height: 30px; background: blue;`\" --\u003e\n  \u003cngx-skeleton-loader [theme]=\"{height: '50px', background: 'red'}\" /\u003e\n  \u003c!-- above line will produce a skeleton component using `height: 50px; background: red;`\" --\u003e\n\u003c/div\u003e\n```\n\n## Angular 17+ Deferrable Views example\n\n```html\n\u003cdiv class=\"item\"\u003e\n  @defer {\n    \u003cmy-item-view /\u003e\n  } @placeholder (minimum 1000ms) {\n    \u003cngx-skeleton-loader /\u003e\n  }\n\u003c/div\u003e\n```\n\n\n## WAI-ARIA values\n\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 want to use in your skeleton loader by passing the options in your component via `[appearance]` attribute.\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- `custom-content`: it will NOT add any appearance. Great for custom content, such as SVG, internal components and such;\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 `[animation]` attribute.\n\n### Options\n\n- `\"false\"` (as string): it will disable the animation;\n- `false` (as boolean): it will disable the animation. Animation will receive `false` as string when attribute field it's not using binding. Component now can receive `false` (boolean), \"false\" (string), or any other animation type via 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\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\u003c!--\nIf you need to change all the background wrapper\nyou need to apply the style changes on the \n`ngx-skeleton-loader` component wrapper\n--\u003e\n\u003cdiv class=\"item\"\u003e\n  \u003c!-- Disables the animation --\u003e\n  \u003cngx-skeleton-loader 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  \u003cngx-skeleton-loader [animation]=\"classAttributeWithBooleanFalseValue\" /\u003e\n  \u003c!-- Uses `progress` as animation --\u003e\n  \u003cngx-skeleton-loader animation=\"progress\" /\u003e\n  \u003cngx-skeleton-loader /\u003e\n  \u003c!-- Uses `pulse` as animation --\u003e\n  \u003cngx-skeleton-loader animation=\"pulse\" /\u003e\n\u003c/div\u003e\n```\n\n\u003e You can check the code details in the [Stackblitz Live Demo Link](https://stackblitz.com/edit/ngx-skeleton-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 `[theme]` attribute.\n\n```html\n\u003c!--\nIf you need to change all the background wrapper\nyou need to apply the style changes on the \n`ngx-skeleton-loader` component wrapper\n--\u003e\n\n\u003cdiv style=\"background: #FF0001; padding: 10px;\"\u003e\n  \u003cngx-skeleton-loader\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```\n\nThe [theme] attribute now accepts the same configuration as `[style]` as well. That means you can manage to use like you're doing with the built-in directive, having a pleasure and beautiful experience\n\n```html\n\u003c!--\nNote that we are using a combination of styles and [style] inside theme object,\nhaving `height.px` receiving a number and `background-color` receiving a HEX Color\n--\u003e\n\u003cdiv style=\"background: #FF0001; padding: 10px;\"\u003e\n  \u003cngx-skeleton-loader\n    count=\"5\"\n    [theme]=\"{ \n      'height.px': 50,\n      'background-color': '#992929'\n    }\"\n  /\u003e\n\u003c/div\u003e\n```\n\n### ⚠️ This is here only as a documentation, but it's not encouraged to be used. Please consider use it with caution ⚠️\n\nAlso, you can use CSS to add theme styles into your component. However, there are some implications:\n\n- You're using `:host` in your stylesheet, which means **you are aware of any possible problem `:host` can create for your app at that level since it's based on [`:host` DOM style scoping](https://developer.mozilla.org/en-US/docs/Web/CSS/:host)**\n- You're adding stylesheet based on `\u003cngx-skeleton-loader\u003e` internal classes. It means that **class naming changes on module's side will be breaking changes for your application as well**.\n\nAs an example, your Component file is like this\n\n```typescript\nimport { Component } from '@angular/core';\n\n@Component({\n  selector: 'my-ngx-skeleton-loader-with-theming',\n  templateUrl: './my-ngx-skeleton-loader-with-theming.component.html',\n  styleUrls: ['./my-ngx-skeleton-loader-with-theming.component.css'],\n})\nexport class MyNGXSkeletonLoaderWithThemingComponent {\n  /* ... code goes here*/\n}\n```\n\nAnd your component HTML code is\n\n```html\n\u003c!--\nfile: my-ngx-skeleton-loader-with-theming.component.html\n\nAs an example, it's not using themes via [theme] attributes.\n--\u003e\n\n\u003cngx-skeleton-loader count=\"5\" animation=\"pulse\" /\u003e\n```\n\nYou can apply theme changes in our stylesheet. At the end it will be\n\n```css\n/* file: `my-ngx-skeleton-loader-with-theming.component.css`\n *\n * You can find more details about `:host` at\n * Angular Component Style Docs https://angular.io/guide/component-styles#host\n */\n:host \u003e\u003e\u003e ngx-skeleton-loader .skeleton-loader {\n  border-radius: 5px;\n  height: 50px;\n  background-color: #992929;\n  border: 1px solid white;\n}\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/ngx-skeleton-loader-sample?file=app%2Fapp.component.html) or check it out a content load simulation [in this Stackblitz Live Demo Link](https://stackblitz.com/edit/ngx-skeleton-loader-user-card-component-sample?file=app%2Fapp.component.html)\n\n## Development\n\n### Run demo locally\n\n1. This project uses [Angular CLI](https://cli.angular.io/) as base. That means you just need to run `npm start` and access the link `http://localhost:4200` in your browser\n\n### Run tests\n\n1. Run `npm test` for run tests. In case you want to test using watch, please use `npm run tdd`\n\n### Publish\n\nthis project is using `np` package to publish, which makes things straightforward. EX: `npx np \u003cpatch|minor|major\u003e --no-yarn --no-cleanup --contents=dist/ngx-skeleton-loader`\n\n\u003e For more details, [please check np package on npmjs.com](https://www.npmjs.com/package/np)\n\n## Contribute\n\nFor any type of contribution, please follow the instructions in [CONTRIBUTING.md](https://github.com/willmendesneto/ngx-skeleton-loader/blob/main/CONTRIBUTING.md) and read [CODE_OF_CONDUCT.md](https://github.com/willmendesneto/ngx-skeleton-loader/blob/main/CODE_OF_CONDUCT.md) and [PUBLISHING_HOTFIX.md](https://github.com/willmendesneto/ngx-skeleton-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%2Fngx-skeleton-loader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwillmendesneto%2Fngx-skeleton-loader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwillmendesneto%2Fngx-skeleton-loader/lists"}