How do you implement a simple progress bar in Angular 8?-CodePudding

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.

Using CSS

.base{
    height: 10px;
    width: 100%;
    background: #ddd;
}

.pBar{
    height: 10px;
    background: #009200;
}

while in component.html:

<div >
    <div  [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

Using the Material v13.3.6 library

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.

Using the Bootstrap v4 library

I imported the library from the terminal and used it in the html component:

<div >
  <div  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

CodePudding user response：

Simplest code I can think of

Set two divs, one for the background, one for the fill, set the width of the fill div with ngStyle, where progress is a number between 0 and 1

<div >
  <div  [ngStyle]="{'width.%': progress * 100}"></div>
</div>

Set progress bar width and height so you can use % for the width. Also set height for the fill div

.progress-bar {
  width: 200px;
  height: 25px;
  background-color: #222;
}

.progress-bar-fill {
  background-color: #5F5;
  height: 100%; /* This is important */
}

CodePudding user response：

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