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

Sponsorships aid in the continued development and maintenance of ngneat libraries. Consider asking your company to sponsor ngneat as its core to their business and application development.

Elevate your support by becoming a Gold Sponsor and have your logo prominently featured on our README in the top 5 repositories.

Boost your backing by becoming a Gold Sponsor and enjoy the spotlight with your logo prominently showcased in the top 3 repositories on our README.

Become a bronze sponsor and get your logo on our README on GitHub.

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

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.

<facebook-content-loader></facebook-content-loader>

<list-content-loader></list-content-loader>

<bullet-list-content-loader></bullet-list-content-loader>

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

MIT © NetanelBasal

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 📖	Robin Van den Broeck 💻

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