Progress Bar

To use the progress bar component you need to load it in the module you'll use it:

import { TwProgressBarModule } from 'ng-tw';

@NgModule({
    imports: [..., TwProgressBarModule],
});

Demo

Basic usage

Determinate
Indeterminate
Buffer

Usage

<div class="demo-container">
    <div class="demo-row">
        <div class="demo-row-title">Determinate</div>

        <div class="demo-row-content md:flex-1">
            <tw-progress-bar
                class="w-full"
                [height]="6"
                [value]="37"
            ></tw-progress-bar>
        </div>
    </div>

    <div class="demo-row">
        <div class="demo-row-title">Indeterminate</div>

        <div class="demo-row-content md:flex-1">
            <tw-progress-bar
                class="w-full"
                [height]="6"
                mode="indeterminate"
            ></tw-progress-bar>
        </div>
    </div>

    <div class="demo-row">
        <div class="demo-row-title">Buffer</div>

        <div class="demo-row-content md:flex-1">
            <tw-progress-bar
                class="w-full"
                mode="buffer"
                [height]="6"
                [value]="37"
                [bufferValue]="57"
            ></tw-progress-bar>
        </div>
    </div>
</div>
NotificationSelect