Security News
The Dark Side of Open Source
At Node Congress, Socket CEO Feross Aboukhadijeh uncovers the darker aspects of open source, where applications that rely heavily on third-party dependencies can be exploited in supply chain attacks.
ngx-shimmer-loading
Advanced tools
Readme
Facebook shimmer loading effect for Angular 8+ apps. It's a fancy way to tell your users that there's something loading.
ngx-shimmer-loading is simple and easy to use. It also comes with the two directions
See Demo page.
ngx-shimmer-loading
:npm i --save ngx-shimmer-loading
NgxShimmerLoadingModule
into your module:import { NgxShimmerLoadingModule } from 'ngx-shimmer-loading';
@NgModule({
...
imports: [ NgxShimmerLoadingModule ],
...
})
export class AppModule {}
ngx-shimmer-loading
component:<ngx-shimmer-loading></ngx-shimmer-loading>
You can customize it with different inputs - check API for more details.
Example:
<ngx-shimmer-loading [shape]="'square'" [width]="'70px'"></ngx-shimmer-loading>
Input | Type | Default | Required | Description |
---|---|---|---|---|
shape | 'circle' OR 'square' OR 'rect' | rect | no | Set shimmer shape. |
width | string | '80%' | no | Set shimmer width. In case of shape is 'circle' or 'square' use width with px unit. |
height | string | '12px' | no | Set shimmer height. In case of shape is 'circle' or 'square' shimmer height will equal shimmer width. |
borderRadius | string | '5px' | no | Set shimmer border radius. In case of shape is 'circle' borderRadius equals '50%' |
direction | 'ltr' OR 'rtl' | 'ltr' | no | Set shimmer direction. |
If you are not happy with default styles you can easily override them with your styles like that:
.shimmer-loading .ngx-shimmer {
// Your styles go here...
}
Note that: shimmer effect animation here depends on css linear-gradient
property so, if you want to change its color you can edit it or you can unset it and change its background-color
value if you don't want the shimmer effect animation.
Contributions are welcome. You can start by looking at issues with label Help wanted or creating new Issue with proposal or bug report.
FAQs
Facebook shimmer loading effect for Angular 8+ apps. It's a fancy way to tell your users that there's something loading. ngx-shimmer-loading is simple and easy to use. It also comes with the two directions.
The npm package ngx-shimmer-loading receives a total of 787 weekly downloads. As such, ngx-shimmer-loading popularity was classified as not popular.
We found that ngx-shimmer-loading demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
At Node Congress, Socket CEO Feross Aboukhadijeh uncovers the darker aspects of open source, where applications that rely heavily on third-party dependencies can be exploited in supply chain attacks.
Research
Security News
The Socket Research team found this npm package includes code for collecting sensitive developer information, including your operating system username, Git username, and Git email.
Security News
OpenJS is warning of social engineering takeovers targeting open source projects after receiving a credible attempt on the foundation.