# Loader Demo
A loader alerts a user to wait for an activity to complete

### Design

### Operate

{{ activeLoader ? 'Hidden' : 'Show' }} Loader
Loader Size:
Loader Text:

### Options

- active: Optional. Type of boolean. Show or hidden loader. Default is false
- loaderText: Optional. Type of string.
- loaderSize: Optional. Type of string. [mini | small | medium | large]

### Codes

    <div class="ui segment" style="margin: 10px 0; width:100%;">
      <lsu-loader [active]="activeLoader" [loaderText]="loaderText" [loaderSize]="loaderSize"></lsu-loader>
      <div class="ui button" (click)="toggle()">{{ activeLoader ? 'Hidden' : 'Show' }} Loader</div>
      <lsu-loader #demoLoader [loaderText]="loaderText" [loaderSize]="loaderSize"></lsu-loader>
      <div class="ui button" (click)="showDemoLoader()">Show Loader</div>
      <div class="ui button" (click)="hideDemoLoader()">Hide Loader</div>
    </div>

    import { Component, ViewChild } from '@angular/core';

    @Component({
      selector: 'loader-demo',
      templateUrl: './loader.html'
    })
    export class LoaderDemoPage {

      @ViewChild('demoLoader') demoLoader: any;

      activeLoader: boolean;
      loaderSize: string = "medium";
      loaderText: string;

      constructor() {
      }

      ngOnInit() {
        this.activeLoader = true;
      }

      toggle(): void {
        this.activeLoader = !this.activeLoader;
      }

      showDemoLoader() {
        this.demoLoader.show();
      }

      hideDemoLoader() {
        this.demoLoader.hide();
      }

      setSize(size: string): void {
        this.loaderSize = size;
      }
    }