Angular component that uses SVG to create a collection of loaders which simulates the structure of the content that will be loaded, similar to Facebook cards loaders.
This is an Angular port for react-content-loader.
- ⚙️ Completely customizable: you can change the colors, speed and sizes;
- ✏️ Create your own loading: use the create-react-content-loader to create your custom loadings easily;
- 👌 You can use right now: there are a lot of presets to use the loader, see the options;
- 🚀 Performance: uses pure SVG to work, so it works without any extra scripts, canvas, etc;
yarn add @netbasal/content-loadernpm install @netbasal/content-loadernpm install @netbasal/content-loader@nextimport { ContentLoaderModule } from '@netbasal/content-loader';
@NgModule({
imports: [
ContentLoaderModule
]
})
export class AppModule { }<content-loader>
<svg:rect x="0" y="0" rx="3" ry="3" width="250" height="10" />
<svg:rect x="20" y="20" rx="3" ry="3" width="220" height="10" />
<svg:rect x="20" y="40" rx="3" ry="3" width="170" height="10" />
<svg:rect x="0" y="60" rx="3" ry="3" width="250" height="10" />
<svg:rect x="20" y="80" rx="3" ry="3" width="200" height="10" />
<svg:rect x="20" y="100" rx="3" ry="3" width="80" height="10" />
</content-loader><facebook-content-loader></facebook-content-loader>
<list-content-loader></list-content-loader>
<bullet-list-content-loader></bullet-list-content-loader>
| Input | Type | Default | Description |
|---|---|---|---|
| animate | boolean | true |
false to render with no animation |
| width | number | 400 |
|
| height | number | 130 |
|
| speed | number | 2 |
|
| preserveAspectRatio | string | 'xMidYMid meet' |
|
| primaryColor | string | '#f9f9f9' |
|
| secondaryColor | string | '#ecebeb' |
|
| primaryOpacity | number | 1 |
|
| secondaryOpacity | number | 1 |
|
| uniqueKey | string | randomId() |
Unique ID, you need to make it consistent for SSR |
This is basically an Angular port for react-content-loader.
MIT © danielsogl