https://github.com/ngneat/content-loader

⚪️ SVG component to create placeholder loading, like Facebook cards loading.
https://github.com/ngneat/content-loader

angular content-loader facebook-loader loader

Last synced: 9 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/ngneat/content-loader
• Owner: ngneat
• License: mit
• Created: 2018-03-25T18:49:37.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2024-02-10T18:09:08.000Z (9 months ago)
• Last Synced: 2024-10-29T22:45:08.278Z (10 days ago)
• Topics: angular, content-loader, facebook-loader, loader
• Language: TypeScript
• Homepage: https://netbasal.com/
• Size: 2.9 MB
• Stars: 735
• Watchers: 17
• Forks: 58
• Open Issues: 24
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

• my-awesome-list - content-loader
• awesome-angular - content-loader - SVG component to create placeholder loading, like Facebook cards loading. (Table of contents / Third Party Components)
• fucking-awesome-angular - content-loader - SVG component to create placeholder loading, like Facebook cards loading. (Table of contents / Third Party Components)
• fucking-awesome-angular - content-loader - SVG component to create placeholder loading, like Facebook cards loading. (Table of contents / Third Party Components)

README

        
# Angular Content Loader

[![All Contributors](https://img.shields.io/badge/all_contributors-11-orange.svg?style=flat-square)](#contributors-)



  



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](https://stackblitz.com/edit/ngx-content-loader)

## Sponsoring ngneat

[Sponsorships](https://github.com/sponsors/ngneat) 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.

### Gold Sponsors

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

### Silver Sponsors

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.

### Bronze Sponsors



  



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

## Features

This is an Angular port for [react-content-loader](https://github.com/danilowoz/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](https://danilowoz.github.io/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](#examples);

- :rocket: **Performance:** uses pure SVG to work, so it works without any extra scripts,

  canvas, etc;



## Install

### Yarn

```bash

yarn add @ngneat/content-loader

```

## Usage

```ts

import { ContentLoaderModule } from '@ngneat/content-loader';

@NgModule({

  imports: [ContentLoaderModule]

})

export class AppModule {}

```

```html

  

  

  

  

  

  

```

> Warning: Safari renders the SVG in black in case your Angular application uses the `` tag in the `