Angular 8+ skeleton loader
npm install @exalif/ngx-skeleton-loader@exalif/ngx-skeleton-loader module as a project dependency.
shell
npm install @exalif/ngx-skeleton-loader --save
`
Setup
You'll need to add NgxSkeletonLoaderModule to your application module. So that, the components will be accessible in your application.
`typescript
...
import { NgxSkeletonLoaderModule } from '@exalif/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;
`html
`
$3
You can use, in combination of count attribute, multiple appearances and themes on a single element. Theme and appearance will be applied depending on each generated loader, depending on index.
`html
count="3"
[appearance]="['circle', '', '']"
[theme]="[
{ width: '20px' },
{ width: '60%' },
{ width: '70%' }
]"
>
`
Note: in case insufficient number of appearance/theme is provided compared to comply with count value, the library will use the first array values of appearance and theme` to style the loader.