https://github.com/jsdaddy/ngx-loader-indicator
Awesome loader for angular applications. No wrappers only you elements
https://github.com/jsdaddy/ngx-loader-indicator
angular carousel loader loading loading-spinner ngx-loader ngx-spiner spiner spinner typescript website
Last synced: 7 months ago
JSON representation
Awesome loader for angular applications. No wrappers only you elements
- Host: GitHub
- URL: https://github.com/jsdaddy/ngx-loader-indicator
- Owner: JsDaddy
- License: mit
- Created: 2018-05-15T15:25:38.000Z (over 7 years ago)
- Default Branch: develop
- Last Pushed: 2024-07-08T13:24:26.000Z (over 1 year ago)
- Last Synced: 2024-10-04T03:18:53.596Z (about 1 year ago)
- Topics: angular, carousel, loader, loading, loading-spinner, ngx-loader, ngx-spiner, spiner, spinner, typescript, website
- Language: TypeScript
- Homepage: https://jsdaddy.github.io/ngx-loader-indicator/
- Size: 11 MB
- Stars: 51
- Watchers: 5
- Forks: 5
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
- awesome-angular - ngx-loader-indicator - Awesome loader for Angular applications. No wrappers only your elements. (Third Party Components / Loaders)
- fucking-awesome-angular - ngx-loader-indicator - Awesome loader for Angular applications. No wrappers only your elements. (Third Party Components / Loaders)
- fucking-awesome-angular - ngx-loader-indicator - Awesome loader for Angular applications. No wrappers only your elements. (Table of contents / Third Party Components)
README
NGX LOADER INDICATOR is the best directive to have loader without wrapping your element to additional component
[](https://github.com/JsDaddy/ngx-loader-indicator/actions/workflows/main.yml)
[](https://www.npmjs.com/package/ngx-loader-indicator)
[](https://npmjs.org/ngx-loader-indicator)
[](https://www.npmjs.com/package/ngx-loader-indicator)
[](https://github.com/JSDaddy/ngx-loader-indicator)
[](https://github.com/JSDaddy/ngx-loader-indicator)
You can also try our NGX MASK [check](https://www.npmjs.com/package/ngx-mask) it.
You can also try our NGX COPYPASTE [check](https://www.npmjs.com/package/ngx-copypaste) it.
### You can try live [demo](https://jsdaddy.github.io/ngx-loader-indicator/) with examples.
## Installing
```bash
$ npm install --save ngx-loader-indicator
```
## Quickstart if ngx-loader-indicator version >= 15.0.0
Pay attention this version works for angular >= 14.0.0
Configure for application with `provideEnvironmentNgxLoaderIndicator`
```typescript
bootstrapApplication(AppComponent, {
providers: [
provideAnimations(),
provideEnvironmentNgxLoaderIndicator(),
(...)
],
}).catch((err) => console.error(err));
```
or configure for feature with `provideNgxLoaderIndicator` and import standalone directive `NgxLoaderIndicatorDirective`
```typescript
@Component({
selector: 'my-feature',
templateUrl: './my-feature.component.html',
styleUrls: ['./my-feature.component.css'],
standalone: true,
imports: [NgxLoaderIndicatorDirective, (...)],
providers: [
(...)
provideNgxLoaderIndicator({
img: 'https://avatars2.githubusercontent.com/u/32452610?s=200&v=4',
loaderStyles: {
background: 'rgba(255, 255, 255, 0.8)',
},
imgStyles: {
width: '50px',
background: 'yellow',
},
rotate: {
duration: 5000,
},
}),
],
})
export class MyFeatureComponent {}
```
## Quickstart if ngx-loader-indicator version < 15.0.0
Pay attention this version works for angular < 12.0.0
Import module in needed module.
```typescript
import {NgxLoaderIndicatorModule} from 'ngx-loader-indicator'
(...)
@NgModule({
(...)
imports: [
NgxLoaderIndicatorModule.forRoot(options)
]
(...)
})
```
### Usage
```html
Content
```
#### Examples
```html
Login
Login
```
## Options
You can define your custom options
### custom img (string) and colors
```typescript
{
img: string,
imgStyles: {
width: string, // '30px'
background: string, // 'yellow' or rgb(255, 255, 0)
}
}
```
### custom wrapper layout colors
```typescript
{
loaderStyles: {
background: string,
},
}
```
### animations options for image rotation
```typescript
rotate: {
delay?: number;
direction?: 'normal' | 'reverse' | 'alternate' | 'alternate-reverse';
duration: number
easing?: string;
endDelay?: number;
fill?: 'none' | 'forwards' | 'backwards' | 'both' | 'auto';
id?: string;
iterationStart?: number;
iterations?: number;
},
```
### Usage
```typescript
import {NgxLoaderIndicatorModule} from 'ngx-loader-indicator'
(...)
@NgModule({
(...)
imports: [
NgxLoaderIndicatorModule.forRoot({
img: 'https://avatars2.githubusercontent.com/u/32452610?s=200&v=4',
loaderStyles: {
background: 'rgba(255, 255, 255, 0.8)',
},
imgStyles: {
width: '100px',
background: 'yellow',
},
rotate: {
duration: 5000
},
}),
]
(...)
})
```
