ngx-skeleton-loader

NGX Skeleton loader

Why skeletons?

The 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:

• Server-side rendering;
• Progressive rendering;
• Any other that you like :)

It's totally transparent for you and you can integrate easier in your application, improving your user experience 🎉

• Demo
• Install
• Setup
• Development
• Contribute

Demo

Try out our demo on Stackblitz!

Install

You can get it on NPM installing ngx-skeleton-loader module as a project dependency.

npm install ngx-skeleton-loader --save

Setup

You'll need to add NgxSkeletonLoaderModule to your application module. So that, the <ngx-skeleton-loader> components will be accessible in your application.

...
import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
...

@NgModule({
  declarations: [
    YourAppComponent
  ],
  imports: [
    ...
    NgxSkeletonLoaderModule,
    ...
  ],
  providers: [],
  bootstrap: [YourAppComponent]
})

export class YourAppComponent {}

After that, you can use the ngx-skeleton-loader components in your templates, passing the configuration data into the component itself.

• ngx-skeleton-loader: Handle the skeleton animation and the skeleton styles of your app;

<div class="item"><ngx-skeleton-loader count="5" appearance="circle"> </ngx-skeleton-loader></div>

Theming

You 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.

<!--
If you need to change all the background wrapper
you need to apply the style changes on the 
`ngx-skeleton-loader`component wrapper
-->

<div
  style="background: #FF0001; padding: 10px;"
>
  <ngx-skeleton-loader
    count="5"
    [theme]="{ 
      'border-radius': '5px',
      height: '50px',
      'background-color': '#992929',
      border: '1px solid white'
    }"
  ></ngx-skeleton-loader>
</div>

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

Development

Run demo locally

1. This project uses Angular CLI as base. That means you just need to run npm start and access the link http://localhost:4200 in your browser

Run tests

1. Run npm test for run tests. In case you want to test using watch, please use npm run tdd

Publish

this project is using np package to publish, which makes things straightforward. EX: np <patch|minor|major> --contents=dist/ngx-skeleton-loader

For more details, please check np package on npmjs.com

Contribute

For any type of contribution, please follow the instructions in CONTRIBUTING.md and read CODE_OF_CONDUCT.md files.

Author

Wilson Mendes (willmendesneto)

• https://twitter.com/willmendesneto
• http://github.com/willmendesneto

Changelog

[1.2.3][] - 2020-02-25

Fixed

• Solving peerDependency warning when installing library in an Angular 9 project