Gbuomprisco / Ngx Content Loading
Licence: mit
Angular component to create SVG loading placeholders
Stars: ✭ 124
Programming Languages
typescript
32286 projects
Labels
Projects that are alternatives of or similar to Ngx Content Loading
Tagify
🔖 lightweight, efficient Tags input component in Vanilla JS / React / Angular / Vue
Stars: ✭ 2,305 (+1758.87%)
Mutual labels: angular-component
Angular Cropperjs
CropperJS integration for Angular +6
Stars: ✭ 88 (-29.03%)
Mutual labels: angular-component
Ui Predicate
Finally a Predicate/Rule Editor UI component for the Web 🚀
Stars: ✭ 86 (-30.65%)
Mutual labels: angular-component
Ngautocomplete
Light-weight autocomplete component for Angular.
Stars: ✭ 52 (-58.06%)
Mutual labels: angular-component
Angular Interview Questions
A list of helpful Angular interview questions you can use to interview potential candidates, test yourself or completely ignore.
Stars: ✭ 967 (+679.84%)
Mutual labels: angular-component
Awesome Angular Components
Catalog of Angular 2+ Components & Libraries
Stars: ✭ 3,185 (+2468.55%)
Mutual labels: angular-component
Ng2 Bs3 Modal
Angular Bootstrap 3 Modal Component
Stars: ✭ 273 (+120.16%)
Mutual labels: angular-component
ng2-go-top-button
A simple customizable go-top-button component for Angular projects.
Stars: ✭ 18 (-85.48%)
Mutual labels: angular-component
awesome-angular
💖 A list of awesome Angular (2️⃣➕) resources
Stars: ✭ 61 (-50.81%)
Mutual labels: angular-component
angular-croppie
Angular 1.5+ Component for Croppie
Stars: ✭ 16 (-87.1%)
Mutual labels: angular-component
ngx-filesaver
Simple file save with FileSaver.js
Stars: ✭ 78 (-37.1%)
Mutual labels: angular-component
angular-tag-cloud-module
This angular module contains a component which generates tag clouds.
Stars: ✭ 38 (-69.35%)
Mutual labels: angular-component
Ngx Avatar
Universal avatar component for angular 2+ applications makes it possible to fetch / generate avatar from different sources
Stars: ✭ 210 (+69.35%)
Mutual labels: angular-component
Angular Notifier
A well designed, fully animated, highly customizable, and easy-to-use notification library for your Angular application.
Stars: ✭ 175 (+41.13%)
Mutual labels: angular-component
Od Virtualscroll
🚀 Observable-based virtual scroll implementation in Angular
Stars: ✭ 133 (+7.26%)
Mutual labels: angular-component
Angular Fullpage
Official Angular wrapper for fullPage.js https://alvarotrigo.com/angular-fullpage/
Stars: ✭ 131 (+5.65%)
Mutual labels: angular-component
ngx-content-loading v0.1.2
Angular component to create SVG loading placeholders. Inspired by the awesome React Content Loader.
Demo
Have a look at a demo app on Stackblitz
Install
npm i --save ngx-content-loading
Usage
Import the module in your app module
import { NgxContentLoadingModule } from 'ngx-content-loading';
@NgModule({
imports: [ NgxContentLoadingModule ]
})
export class AppModule {}
Presets
Use presets
<ngx-content-loading [width]="800">
<svg:g ngx-facebook-preset></svg:g>
</ngx-content-loading>
<ngx-content-loading [width]="800" [height]="800">
<svg:g ngx-instagram-preset></svg:g>
</ngx-content-loading>
Available presets
- ngx-facebook-preset
- ngx-instagram-preset
- ngx-code-preset
- ngx-list-preset
- ngx-bullet-list-preset
Define custom shapes
<ngx-content-loading
[speed]="'1500ms'"
[width]="1000"
[height]="300"
[primaryColor]="'#222'"
[secondaryColor]="'#5e5e5e'">
<svg:g ngx-circle cy="30" cx="30" r="30" ry="5"></svg:g>
<svg:g ngx-rect width="150" height="10" y="10" x="70" rx="5" ry="5"></svg:g>
<svg:g ngx-rect width="90" height="10" y="40" x="70" rx="5" ry="5"></svg:g>
<svg:g ngx-rect width="210" height="10" y="70" x="0" rx="5" ry="5"></svg:g>
<svg:g ngx-rect width="240" height="10" y="100" x="0" rx="5" ry="5"></svg:g>
</ngx-content-loading>
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
<ngx-content-loading
[speed]="'1500ms'"
[width]="1000"
[height]="300"
[primaryColor]="'#222'"
[secondaryColor]="'#5e5e5e'">
<b before-svg>
I am transcluded before the svg
</b>
<svg:g ngx-circle cy="30" cx="30" r="30" ry="5"></svg:g>
<svg:g ngx-rect width="150" height="10" y="10" x="70" rx="5" ry="5"></svg:g>
<svg:g ngx-rect width="90" height="10" y="40" x="70" rx="5" ry="5"></svg:g>
<svg:g ngx-rect width="210" height="10" y="70" x="0" rx="5" ry="5"></svg:g>
<svg:g ngx-rect width="240" height="10" y="100" x="0" rx="5" ry="5"></svg:g>
<b after-svg>
I am transcluded after the svg
</b>
</ngx-content-loading>
Development
Fork the repo then clone it
$ git clone [email protected]:YourUsername/ngx-content-loading.git && cd ngx-content-loading
Install the dependencies
$ yarn or npm i
Run the demo app
$ npm start
License
Please notice this is a work in progress and may not be ready for production usage.
More presets and options will follow soon :)
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].