https://github.com/gbuomprisco/ngx-content-loading
Angular component to create SVG loading placeholders
https://github.com/gbuomprisco/ngx-content-loading
angular-component awesome-angular content-loader placeholder-image
Last synced: 3 months ago
JSON representation
Angular component to create SVG loading placeholders
- Host: GitHub
- URL: https://github.com/gbuomprisco/ngx-content-loading
- Owner: Gbuomprisco
- License: mit
- Created: 2017-12-28T15:05:46.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2023-01-03T20:36:55.000Z (over 3 years ago)
- Last Synced: 2025-04-02T12:09:38.262Z (about 1 year ago)
- Topics: angular-component, awesome-angular, content-loader, placeholder-image
- Language: TypeScript
- Size: 2.79 MB
- Stars: 127
- Watchers: 6
- Forks: 21
- Open Issues: 24
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# ngx-content-loading v0.1.4
Angular component to create SVG loading placeholders. Inspired by the awesome [React Content Loader](https://github.com/danilowoz/react-content-loader).
## [Demo](https://ngx-content-loading.stackblitz.io/)
Have a look at a demo app on [Stackblitz](https://ngx-content-loading.stackblitz.io/)
## Install
npm i --save ngx-content-loading
## Usage
### Import the module in your app module
```javascript
import { NgxContentLoadingModule } from 'ngx-content-loading';
@NgModule({
imports: [ NgxContentLoadingModule ]
})
export class AppModule {}
```
### Presets
#### Use presets
```html
```
#### Available presets
- ngx-facebook-preset
- ngx-instagram-preset
- ngx-code-preset
- ngx-list-preset
- ngx-bullet-list-preset
### Define custom shapes
```html
```
## API
| Name | Type | Default | Description |
| ------------------- | -------- | --------------- | --------------------------------------------------------------- |
| speed | _Number_ | `1000ms` | Animation speed specified in s or ms |
| width | _Number_ | `400` | **viewBox** width of SVG |
| height | _Number_ | `130` | **viewBox** height of SVG |
| primaryColor | _String_ | `#f3f3f3` | Background the SVG |
| secondaryColor | _String_ | `#ecebeb` | Animation color |
| preserveAspectRatio | _String_ | `xMidYMid meet` | Aspect ratio option of SVG |
### Transclude elements before and after the SVG element
```html
I am transcluded before the svg
I am transcluded after the svg
```
## Development
Fork the repo then clone it
`$ git clone git@github.com:YourUsername/ngx-content-loading.git && cd ngx-content-loading`
Install the dependencies
`$ yarn` or `npm i`
Run the demo app
`$ npm start`
## License
[MIT](https://github.com/gbuomprisco/ngx-content-loading/blob/master/LICENSE)
Please notice this is a work in progress and may not be ready for production usage.
More presets and options will follow soon :)