I'm having trouble changing the border-radius of the value of an element.
<mat-progress-bar [class]="color" [value]="{{ progress }}"></mat-progress-bar>
I want the progress bar value to look something like this:
Instead of this:
Is it possible to make a mat-progress-bar with rounded corners?
Viewed 677
1 Answers
HTML:
<mat-progress-bar mode="determinate" value="20" class="progressBar"></mat-progress-bar>
CSS:
.progressBar {
width: 225px;
border-radius: 2.5px;
height: 5px;
}
:host ::ng-deep .mat-progress-bar .mat-progress-bar-fill::after {
border-top-right-radius: 50% 25px;
border-bottom-right-radius: 50% 25px;
}
Related