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>