https://github.com/ahmedbeheiry/ngx-shimmer-loading
Facebook shimmer loading for angular 8+ apps. An easy and simple way to tell your users that there is something loading with fancy UI elements.
https://github.com/ahmedbeheiry/ngx-shimmer-loading
angular angular8 facebook-shimmer loading shimmer
Last synced: 8 months ago
JSON representation
Facebook shimmer loading for angular 8+ apps. An easy and simple way to tell your users that there is something loading with fancy UI elements.
- Host: GitHub
- URL: https://github.com/ahmedbeheiry/ngx-shimmer-loading
- Owner: ahmedbeheiry
- Created: 2019-12-06T20:10:36.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2025-05-10T20:28:21.000Z (about 1 year ago)
- Last Synced: 2025-09-27T22:31:18.928Z (9 months ago)
- Topics: angular, angular8, facebook-shimmer, loading, shimmer
- Language: TypeScript
- Homepage: https://ahmedbeheiry.github.io/ngx-shimmer-loading/
- Size: 1.12 MB
- Stars: 13
- Watchers: 1
- Forks: 9
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Shimmer Loading for Angular 15+ Apps
Facebook shimmer loading effect for Angular 15+ 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](https://ahmedbeheiry.github.io/ngx-shimmer-loading) page.
## Table of contents
- [Features](#features)
- [Getting started](#getting-started)
- [API](#api)
- [Custom Styles](#custom-styles)
- [Contributing](#contributing)
## Features
- [x] Easy and simple to use.
- [x] Easy to setup.
- [x] No Dependencies.
- [x] Fancy Animations.
## Getting started
### Step 1: Install `ngx-shimmer-loading`:
#### NPM
```shell
npm i --save ngx-shimmer-loading
```
### Step 2: Import the `NgxShimmerLoadingModule` into your module:
```ts
import { NgxShimmerLoadingModule } from 'ngx-shimmer-loading';
@NgModule({
...
imports: [ NgxShimmerLoadingModule ],
...
})
export class AppModule {}
```
### Step 3: Use the `ngx-shimmer-loading` component:
```html
```
You can customize it with different inputs - check [API](#api) for more details.
Example:
```html
```
## API
### Inputs
| 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. |
## Custom Styles
If you are not happy with default styles you can easily override them with your styles like that:
```css
.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.
## Contributing
Contributions are welcome. You can start by looking at [issues](https://github.com/ahmedbeheiry/ngx-shimmer-loading/issues?q=is%3Aopen+is%3Aissue+label%3A%22help+wanted%22) with label _Help wanted_ or creating new Issue with proposal or bug report.