File
|
completed
|
Type : number
|
Default value : 0
|
|
|
|
progress
|
Type : number
|
Default value : 0
|
|
|
|
total
|
Type : number
|
Default value : 0
|
|
|
import { Component, Input } from '@angular/core';
@Component({
selector: 'progress-bar',
templateUrl: './progress-bar.component.html',
styleUrls: ['./progress-bar.component.scss'],
})
export class ProgressBarComponent {
@Input() progress = 0;
@Input()total = 0;
@Input()completed = 0;
@Input() showTracker ;
}
<div class="_flex-box _justify-content-center" [ngClass]="{'padding-top' : showTracker}" style="width: 5.625rem;">
<div class="progress-outer inProgress" [ngClass]="{'completed': progress === 100}">
<div class="progress-inner _flex-box _justify-content-center" [style.width]="progress + '%'">
</div>
</div>
<div class="_flex-box _justify-content-center textStyle" *ngIf="!showTracker"> {{progress}}%</div>
</div>
<div class="_flex-box _justify-content-center" *ngIf="showTracker">
{{completed}} / {{total}}
</div>
@import "src/assets/styles/base/_variables.scss";
@import "src/assets/styles/_custom-mixins.scss";
@import "src/assets/styles/_variables.scss";
.progress-outer {
flex: 1;
text-align: center;
color: $white;
}
.progress-inner {
min-height: 0.75rem;
white-space: nowrap;
overflow: hidden;
// border-radius: 5px;
}
.completed {
border: 1px solid map-get($colors, secondary) !important;
div {
background-color: map-get($colors, secondary) !important;
}
}
.inProgress {
border: 1px solid $orange;
border-radius: 5px;
div {
background-color: $orange;
}
}
.textStyle {
font-size: 0.625rem;
font-weight: 500;
margin-left: 5px;
}
.padding-top {
padding-top:12px;
}
Legend
Html element with directive