# loader0.2.3

> This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 9.0.1. # Install

Latest version **0.2.3** (published 2020-05-22) · ISC license · 0 weekly downloads

## Install

```sh
npm install loader0.2.3
pnpm add loader0.2.3
yarn add loader0.2.3
bun add loader0.2.3
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.3 |
| Published | 2020-05-22 |
| First published | 2020-05-22 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 493.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Vladimir |
| Maintainers | vladimirmana |
| Keywords | Loader, Loader, Angular9+, MultipleLoaders, HttpLoader |

## Links

- npm: https://www.npmjs.com/package/loader0.2.3
- Repository: https://github.com/vladimirMana/loader
- Homepage: https://github.com/vladimirMana/loader#readme
- Issues: https://github.com/vladimirMana/loader/issues
- npm.io page: https://npm.io/package/loader0.2.3

## Recent versions

- 0.2.3 (latest) — 2020-05-22

## README

# Loader

This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 9.0.1.
# Install

`npm install @vladimirmana/loader`

## Usage

#### 1. Import the VMLoader module in app.module.ts

```ts
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { VMLoaderModule } from '@vladimirmana/loader';
@NgModule({
    imports: [
      BrowserModule,
      BrowserAnimationsModule,
      VMLoaderModule.forRoot()
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }
```

#### 2. Add the loader component in your page

```html
<vm-loader [loaderSettings]="appLoader"></vm-loader>
```

#### 3. Set loader settings

```ts
public appLoader: LoaderSettings = { name: 'mainLoader'};
```

##### Loader settings interface

```ts
export interface LoaderSettings {
  name: string, // The name of the loader is unique. Loader named 'httpLoader' is opened and closed with http events but can be handled manually as well 
  spinnerType?: string,
  relativeLoader?:boolean, // The loader is with position fixed by default. Through this property you can use the loader as relative element
  absoluteLoader?: boolean, // You can add the loader in relative container and use it as absolute element
  logoUrl?: string,
  backgroundUrl?: string,
  cssProperties?: CssProperties,
  openLoaderConditions?: Array<OpenLoaderCondition> // Additional requried conditions that should be meet in order to open the loader
}
```
##### If you use http loader, you can restrict on which routes you want to show it or not. That can be achieved with setting up restricted http routes in the configuration of the loader module 

##### The Loader Configuration can be injected through the forRoot method

```ts
@NgModule({
    imports: [
        VMLoaderModule.forRoot({
          restrictedHttpRoutes:[]
        })
    ],
})
```
##### Loader configuration

```ts
export interface RestrictedRoute {
  url: string
  method: string
}
export class LoaderConfig {
  restrictedHttpRoutes?: Array<RestrictedRoute> //Handled only for httpLoader
}
```

#### Insert additional conditions in which you want to open the loader

##### When you are using multiple loaders on one page you might want to have set of rules or conditions in which you want to show some loaders depending on the state of the others. Add list of addional conditions in order to avoid conflicts between the loaders.

##### Open Loader Conditions Interface

```ts
export interface OpenLoaderCondition {
  loaderName: string, // Name of the loader that is connected with the condition
  visible: boolean // State of that loader that is requred for the condition
}
```

#### Customize the loader through the available css properties

##### Css Properties interface

```ts
export interface CssProperties {
  background_color?: string
  opacity?: number,
  spinner_color?: string
}
```
##### Import loaderService to component.ts

```ts
import { VMLoaderService } from '@vladimirmana/loader';
export class [componentName]{
  constructor(
    private loaderServce: VMLoaderService) {
  }
```
##### Open specific loader
```ts
this.loaderService.openLoader([loaderName])
```

##### Close specific loader
```ts
this.loaderService.closeLoader([loaderName])
```

#### Available spinners

  <ul>
    <li>spinner</li>
    <li>foldingCube</li>
    <li>rotatingPlane</li>
    <li>bars</li>
    <li>chasingDots</li>
    <li>circleDots</li>
    <li>circleBounce</li>
    <li>fadingDots</li>
    <li>rotatingDots</li>
  </ul>

---
_Source: https://npm.io/package/loader0.2.3 · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._