Progress

Name: ng-oat
Author: SashiKumar Yadav

Progress bars using the native <progress> element.

Input	Type	Default	Description
`value`	`number`	required	Current progress value
`max`	`number`	`100`	Maximum value

Import & Usage

typescript

import { Component } from '@angular/core';
import { NgOatProgress } from '@letsprogram/ng-oat';

@Component({
  selector: 'app-example',
  imports: [NgOatProgress],
  template: `
    <ng-oat-progress [value]="60" />
    <ng-oat-progress [value]="3" [max]="5" />
  `,
})
export class ExampleComponent {}

Basic Progress Bars

html

<ng-oat-progress [value]="30" />
<ng-oat-progress [value]="60" />
<ng-oat-progress [value]="90" />

Custom Max

3 of 5 tasks completed

html

<ng-oat-progress [value]="3" [max]="5" />