danielsogl-content-loader

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.

Live Demo

Features

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;

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