DaSchTour / content-loader

⚪️ SVG component to create placeholder loading, like Facebook cards loading.

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 @ngneat/content-loader

Usage

import { ContentLoaderModule } from '@ngneat/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>

Warning: Safari renders the SVG in black in case your Angular application uses the <base href="/" /> tag in the <head/> of your index.html. Refer to the input property baseUrl below to fix this issue.

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
baseUrl	string	``	Required if you're using <base href="/" /> in your <head/>. Defaults to an empty string. This prop is commom used as: <content-loader [baseUrl]="window.location.pathname"></content-loader> which will fill the svg attribute with the relative path. Do not forget to provide the window property from your component class because window is not available in the template otherwise. Related #93.
ignoreBaseUrl	boolean	false	Will ignore current baseUrl. Useful for cases where the url changes after the page is loaded (changing GET params for instance)
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
rtl	boolean	false	Right-to-left animation
style	Object	null	Ex: { width: '100%', height: '70px' }

Credits

This is basically an Angular port for react-content-loader.

License

MIT © NetanelBasal

Contributors ✨

Thanks goes to these wonderful people (emoji key):

Netanel Basal 💻 🖋 📖	Heo 💻	Andreas Aeschlimann 📖	alexw10 💻 📖	Chinonso Chukwuogor 💻	wynfred 💻	Rustam 💻
Alex Malkevich 📖	Daniel Sogl 💻	Alex Szabó‮ 💻	Roy 📖

This project follows the all-contributors specification. Contributions of any kind welcome!