# Progress Demo
A progress bar shows the progression of a task

### Design

### Operate

Label:
Text:
Size:

### Options

- percent: Required. 0-100
- text: Optional. Just like 50% 、70% 、90%...
- label: Optional. Shown below porgress
- color: Optional. see Semantic-Ui Progress Color
- size: Optional. [ tiny | small | standard | large | big ], Default is standard

### Codes

    <lsu-progress [label]="label" [percent]="percent" [text]="text" [color]="'teal'" [size]="size"></lsu-progress>

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

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

      label: string = "Uploading...";
      text: string;
      color: string = "teal";
      size: string = "standard";
      percent: number = 0;

      timer: any;

      constructor() {

      }

      ngOnInit() {
        this.animation();
      }

      animation(): void {
        if (this.timer) {
          clearInterval(this.timer);
        }
        this.timer = setInterval(() => {
          this.percent += Math.floor(Math.random() * 10 + 10);
          if (this.percent > 100) {
            this.percent = 0;
          }
        }, 500)
      }

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