CODEWITHSUNDEEP
angularprogress-barangular-material
linuscastelino
linuscastelino

Reputation: 203

Angular Material Progress bar not working - produces dotted lines

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:

[UI Screenshot1

Code Snippet:

VS Code screenshot

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

Upvotes: 4

Views: 6272

Answers (1)

linuscastelino
linuscastelino

Reputation: 203

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.

Upvotes: 13

Related Questions