# Loader Page

### Métodos

#### show

Este método irá exibir o loader de página

#### dismiss

Este método irá remover o loader de página

#### setProgress

Este método permite incluir um valor numérico em porcentagem que irá representar a posição da barra de progresso no loader de página

### Uso

{% code title="page-loader-page.component.html" %}

```html
<cat-toolbar [config]="getToolbarInfo()">
  <nav buttons>
    <cat-primary-button (click)="demonstrate()">Demonstrar</cat-primary-button>
  </nav>
</cat-toolbar>
```

{% endcode %}

{% code title="page-loader-page.component.ts" lineNumbers="true" %}

```typescript
import { Component } from '@angular/core';
import { CatComponentBase } from '@catrx/ui/common';
import { CatLoaderPageService } from '@catrx/ui/loader-page';
import { klDelay } from '@koalarx/utils/operators/delay';

@Component({
  templateUrl: './page-loader-page.component.html'
})
export class PageLoaderPageComponent extends CatComponentBase {
  constructor(private loaderPageService: CatLoaderPageService) {
    super();
  }

  async demonstrate() {
    this.loaderPageService.show();

    let progress = 0;
    do {
      await klDelay(50);
      progress++;
      this.loaderPageService.setProgress(progress);
    } while (progress < 100);

    this.loaderPageService.dismiss();
  }
}
```

{% endcode %}

{% code title="page-loader-page.module.ts" lineNumbers="true" %}

```typescript
import { NgModule } from "@angular/core";
import { CatPrimaryButtonComponent } from "@catrx/ui/button/primary";
import { CatToolbarModule } from "@catrx/ui/toolbar";
import { PageLoaderPageComponent } from "./page-loader-page.component";
import { PageLoaderPageRoutingModule } from "./page-loader-page.routing.module";

@NgModule({
  declarations: [PageLoaderPageComponent],
  imports: [CatToolbarModule, CatPrimaryButtonComponent, PageLoaderPageRoutingModule]
})
export class PageLoaderPageModule { }
```

{% endcode %}

### Overview

{% embed url="<https://cat-ui.igordrangel.com.br/services/loader-page>" %}