2.1.0 • Published 6 years ago
danielsogl-content-loader v2.1.0
Angular Content Loader
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.
Features
This is an Angular port for react-content-loader.
- :gear: Completely customizable: you can change the colors, speed and sizes;
- :pencil2: Create your own loading: use the create-react-content-loader to create your custom loadings easily;
- :ok_hand: You can use right now: there are a lot of presets to use the loader, see the options;
- :rocket: Performance: uses pure SVG to work, so it works without any extra scripts, canvas, etc;
Install
Yarn
yarn add @netbasal/content-loader
Npm
npm install @netbasal/content-loader
Angular 6
npm install @netbasal/content-loader@next
Usage
import { 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>
Examples
Facebook Style
<facebook-content-loader></facebook-content-loader>
List Style
<list-content-loader></list-content-loader>
Bullet list Style
<bullet-list-content-loader></bullet-list-content-loader>
API
@Inputs
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 |
Credits
This is basically an Angular port for react-content-loader.
License
MIT © danielsogl
2.1.0
6 years ago