Angular Material Progress bar not working - produces dotted lines

Question

I am trying to create a contact form in Angular and I wish to display an indeterminate progress bar using Angular Material when the user clicks on submit.

I followed the steps mentioned on the official Angular Material site (https://material.angular.io/components/progress-bar/overview). However, when I include it in my web application, the progress bar simply shows up as dotted lines.

PFB screenshot displaying the issue:

[1

Code Snippet:

Can anyone please advise why does Angular-Material progress bar behave this way and the possible solutions for it?

Answer 1

Solved! I had missed out on including the pre-built theme in the root css file.

Adding @import "~@angular/material/prebuilt-themes/indigo-pink.css"; in style.css resolved the issue and the progress bar started working as expected.