Gathering detailed insights and metrics for ngx-content-loading
Gathering detailed insights and metrics for ngx-content-loading
Angular component to create SVG loading placeholders
Installations
npm install ngx-content-loadingDeveloper Guide
BETA
Typescript
No
Module System
CommonJS
Node Version
16.1.0
NPM Version
6.11.0
Releases
Unable to fetch releases
Languages
3
TypeScript
HTML
JavaScript
TypeScript (68.53%)
HTML (23.23%)
JavaScript (8.24%)
Developer
Gbuomprisco
Download Statistics
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
GitHub Statistics
MIT License
125 Stars
37 Commits
21 Forks
6 Watchers
16 Branches
1 Contributors
Updated on Jun 25, 2025
Maintainers
1
Package Meta Information
Latest Version
0.2.1
Package Id
ngx-content-loading@0.2.1
Unpacked Size
155.87 kB
Size
29.16 kB
File Count
38
NPM Version
6.11.0
Node Version
16.1.0
Total Downloads
Cumulative downloads
Total Downloads
NaN
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
1
Peer Dependencies
4
ngx-content-loading v0.1.4
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
1import { NgxContentLoadingModule } from 'ngx-content-loading'; 2 3@NgModule({ 4 imports: [ NgxContentLoadingModule ] 5}) 6export class AppModule {} 7
Presets
Use presets
1<ngx-content-loading [width]="800"> 2 <svg:g ngx-facebook-preset></svg:g> 3</ngx-content-loading> 4 5<ngx-content-loading [width]="800" [height]="800"> 6 <svg:g ngx-instagram-preset></svg:g> 7</ngx-content-loading>
Available presets
- ngx-facebook-preset
- ngx-instagram-preset
- ngx-code-preset
- ngx-list-preset
- ngx-bullet-list-preset
Define custom shapes
1<ngx-content-loading 2 [speed]="'1500ms'" 3 [width]="1000" 4 [height]="300" 5 [primaryColor]="'#222'" 6 [secondaryColor]="'#5e5e5e'"> 7 <svg:g ngx-circle cy="30" cx="30" r="30" ry="5"></svg:g> 8 <svg:g ngx-rect width="150" height="10" y="10" x="70" rx="5" ry="5"></svg:g> 9 <svg:g ngx-rect width="90" height="10" y="40" x="70" rx="5" ry="5"></svg:g> 10 <svg:g ngx-rect width="210" height="10" y="70" x="0" rx="5" ry="5"></svg:g> 11 <svg:g ngx-rect width="240" height="10" y="100" x="0" rx="5" ry="5"></svg:g> 12 </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
1<ngx-content-loading 2 [speed]="'1500ms'" 3 [width]="1000" 4 [height]="300" 5 [primaryColor]="'#222'" 6 [secondaryColor]="'#5e5e5e'"> 7 <b before-svg> 8 I am transcluded before the svg 9 </b> 10 <svg:g ngx-circle cy="30" cx="30" r="30" ry="5"></svg:g> 11 <svg:g ngx-rect width="150" height="10" y="10" x="70" rx="5" ry="5"></svg:g> 12 <svg:g ngx-rect width="90" height="10" y="40" x="70" rx="5" ry="5"></svg:g> 13 <svg:g ngx-rect width="210" height="10" y="70" x="0" rx="5" ry="5"></svg:g> 14 <svg:g ngx-rect width="240" height="10" y="100" x="0" rx="5" ry="5"></svg:g> 15 16 <b after-svg> 17 I am transcluded after the svg 18 </b> 19 </ngx-content-loading>
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
Please notice this is a work in progress and may not be ready for production usage.
More presets and options will follow soon :)
No vulnerabilities found.
Reason
no binaries found in the repo
Reason
license file detected
Details
- Info: project has a license file: LICENSE:0
- Info: FSF or OSI recognized license: MIT License: LICENSE:0
Reason
Found 0/29 approved changesets -- score normalized to 0
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
- Warn: no security policy file detected
- Warn: no security file to analyze
- Warn: no security file to analyze
- Warn: no security file to analyze
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
branch protection not enabled on development/release branches
Details
- Warn: branch protection not enabled for branch 'master'
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
- Warn: 0 commits out of 2 are checked with a SAST tool
Reason
79 existing vulnerabilities detected
Details
- Warn: Project is vulnerable to: GHSA-c75v-2vq8-878f
- Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8
- Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
- Warn: Project is vulnerable to: GHSA-whgm-jr23-g3j9
- Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw
- Warn: Project is vulnerable to: GHSA-fwr7-v2mv-hh25
- Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7
- Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw
- Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
- Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x
- Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
- Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq
- Warn: Project is vulnerable to: GHSA-273r-mgr4-v34f
- Warn: Project is vulnerable to: GHSA-r7qp-cfhv-p84w
- Warn: Project is vulnerable to: GHSA-67mh-4wv8-2f99
- Warn: Project is vulnerable to: GHSA-6h5x-7c5m-7cr7
- Warn: Project is vulnerable to: GHSA-rv95-896h-c2vc
- Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx
- Warn: Project is vulnerable to: GHSA-74fj-2j2h-c42q
- Warn: Project is vulnerable to: GHSA-pw2r-vq6v-hr8c
- Warn: Project is vulnerable to: GHSA-jchw-25xp-jwwc
- Warn: Project is vulnerable to: GHSA-cxjh-pqwp-8mfp
- Warn: Project is vulnerable to: GHSA-rc47-6667-2j5j
- Warn: Project is vulnerable to: GHSA-c7qv-q95q-8v27
- Warn: Project is vulnerable to: GHSA-78xj-cgh5-2h22
- Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp
- Warn: Project is vulnerable to: GHSA-896r-f27r-55mw
- Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h
- Warn: Project is vulnerable to: GHSA-36fh-84j7-cv5h
- Warn: Project is vulnerable to: GHSA-7x7c-qm48-pq9c
- Warn: Project is vulnerable to: GHSA-rc3x-jf5g-xvc5
- Warn: Project is vulnerable to: GHSA-76p3-8jx3-jpfq
- Warn: Project is vulnerable to: GHSA-3rfm-jhwj-7488
- Warn: Project is vulnerable to: GHSA-hhq3-ff78-jv3g
- Warn: Project is vulnerable to: GHSA-82v2-mx6x-wq7q
- Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
- Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3
- Warn: Project is vulnerable to: GHSA-vh95-rmgr-6w4m
- Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h
- Warn: Project is vulnerable to: GHSA-qrpm-p2h7-hrv2
- Warn: Project is vulnerable to: GHSA-mwcw-c2x4-8c55
- Warn: Project is vulnerable to: GHSA-5rrq-pxf6-6jx5
- Warn: Project is vulnerable to: GHSA-8fr3-hfg3-gpgp
- Warn: Project is vulnerable to: GHSA-gf8q-jrpm-jvxq
- Warn: Project is vulnerable to: GHSA-2r2c-g63r-vccr
- Warn: Project is vulnerable to: GHSA-cfm4-qjh2-4765
- Warn: Project is vulnerable to: GHSA-x4jg-mjrx-434g
- Warn: Project is vulnerable to: GHSA-rp65-9cf3-cjxr
- Warn: Project is vulnerable to: GHSA-hj48-42vr-x3v9
- Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j
- Warn: Project is vulnerable to: GHSA-rhx6-c78j-4q9w
- Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j
- Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp
- Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6
- Warn: Project is vulnerable to: GHSA-gcx4-mw62-g8wm
- Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
- Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg
- Warn: Project is vulnerable to: GHSA-76p7-773f-r4q5
- Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p
- Warn: Project is vulnerable to: GHSA-25hc-qcg6-38wj
- Warn: Project is vulnerable to: GHSA-qm95-pgcg-qqfq
- Warn: Project is vulnerable to: GHSA-cqmj-92xf-r6r9
- Warn: Project is vulnerable to: GHSA-5955-9wpr-37jh
- Warn: Project is vulnerable to: GHSA-qq89-hq3f-393p
- Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36
- Warn: Project is vulnerable to: GHSA-4wf5-vphf-c2xc
- Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3
- Warn: Project is vulnerable to: GHSA-fhg7-m89q-25r3
- Warn: Project is vulnerable to: GHSA-rqff-837h-mm52
- Warn: Project is vulnerable to: GHSA-8v38-pw62-9cw2
- Warn: Project is vulnerable to: GHSA-hgjh-723h-mx2j
- Warn: Project is vulnerable to: GHSA-jf5r-8hm2-f872
- Warn: Project is vulnerable to: GHSA-hc6q-2mpp-qw7j
- Warn: Project is vulnerable to: GHSA-4vvj-4cpr-p986
- Warn: Project is vulnerable to: GHSA-wr3j-pwj9-hqq6
- Warn: Project is vulnerable to: GHSA-4v9v-hfq4-rm2v
- Warn: Project is vulnerable to: GHSA-9jgg-88mc-972h
- Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q
- Warn: Project is vulnerable to: GHSA-776f-qx25-q3cc
Score
1.7
/10
Last Scanned on 2025-07-07
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More