Reputation: 128
I would like to implement a progress bar which increases progressively as a variable increases.
I've tried it 3 ways, none of them work as I wrote it.
.base{
height: 10px;
width: 100%;
background: #ddd;
}
.pBar{
height: 10px;
background: #009200;
}
while in component.html:
<div class="base">
<div class="pBar" [ngStyle]="{'width.%':value}"></div>
</div>
where 'value' is a numeric value declared in the component.ts and initialized to 10 in ngOnInit()
Result: a progress bar at 100%, if I change 'value' the result remains unchanged
importing the library and inserting it in the module.ts imports and then inserting it in the component.html:
<mat-progress-bar mode="determinate" value="40" color="warn"></mat-progress-bar>
Result: a black bar that starts from the middle of the screen and goes all the way to the right end; changing value, even manually, nothing changes.
I imported the library from the terminal and used it in the html component:
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
by inserting below a js script with a setInterval to progressively change the value of aria-valuenow and width:
Result: a fixed bar at 100%, but manually changing the value of width the bar changed size of course
Did I do something wrong? How can I achieve my goal? Thank you
Solution:
Thanks to Sebastien Servouze for showing me the way.
This is the progress bar I wanted to make (using bootstrap 4)
In the component.html:
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated bg-danger" role="progressbar" [ngStyle]="{'width.%': progress * 100}" [attr.aria-valuenow]="progress" aria-valuemin="0" aria-valuemax="100"></div>
</div>
In the component.ts:
import { timer } from 'rxjs';
progress!:number;
ngOnInit(): void {
this.progress = 0;
this.start(); }
start(){
timer(0, 50).subscribe(()=>{
while (this.progress < 1)
this.progress+=0,01;
});}
I hope I've helped someone else.
Upvotes: 1
Views: 7894
Reputation: 1
You can use the <progress> tag to use builtin progressbar, more about that you can find here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress And here: https://css-tricks.com/html5-progress-element/
Upvotes: 0
Reputation: 770
Simplest code I can think of
<div class="progress-bar">
<div class="progress-bar-fill" [ngStyle]="{'width.%': progress * 100}"></div>
</div>
.progress-bar {
width: 200px;
height: 25px;
background-color: #222;
}
.progress-bar-fill {
background-color: #5F5;
height: 100%; /* This is important */
}
Upvotes: 2