If you're unsure about when to use this, check out the following resource for creating CSS progress bars: https://css-tricks.com/css3-progress-bars/
This technique involves using HTML and CSS to create a customizable bar.
The concept is simple - you have a "wrapper" element that sets the maximum length, and a "bar" element inside it where you can define the width as a percentage along with a background color.
For example, here's how you could create a blue bar that is 50% wide:
.wrapper {
width: 100%;
}
.bar {
background: blue;
height: 5px;
}
<div class="wrapper">
<div class="bar" style="width: 50%"></div>
</div>
You can create an Angular component based on this idea by allowing the width to be passed in as a parameter. Here's an example:
import { Component, Input } from '@angular/core';
@Component({
selector: 'app-bar',
template: `
<div class="wrapper">
<div class="bar" [style.width]="width"></div>
</div>
`,
styles: [`
.wrapper {
width: 100%;
}
.bar {
background: blue;
height: 5px;
}
`]
})
export class BarComponent {
@Input() width: number;
}