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
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-loeader>
components will be accessible in your application.
@NgModule({
declarations: [
YourAppComponent
],
imports: [
NgxSkeletonLoaderModule,
...
],
providers: [],
bootstrap: [YourAppComponent]
})
export class YourAppComponent {}
After that, you can use the featureToggle
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>
Development
Run demo locally
- 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
- 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)