PrimeNg Progress Bar

Tonight I want to show you how easy to make a progresbar with Prime Ng.  As usual we must add progressbar component to the app.module

Second step is using it in your html file. So we must decide status bar type “dynamic, static or indeterminate”. I will show you to use indeterminate progressbar. Add the code below to your html file below the button you use.

And we will control the progressbar by div_visible variable. When our process has finished (fetching data vs..), we will set it to false and make the div invisible.

That’s all. You can also use ProgressSpinner instead of ProgressBar as you wish. You should have a look at my another post about PrimeNg ContextMenu


If you have question do not forget to write from the chat button next to it or from the comment

You may also like...

3 Responses

  1. username says:

    Just desire to say your article is as astounding. The clarity in your post is just spectacular and i can assume you’re an expert on this subject. Well with your permission let me to grab your feed to keep up to date with forthcoming post. Thanks a million and please keep up the gratifying work.

  2. Prakhar says:

    if Progress Bar is static, try following in the css, worked for me

    :host::ng-deep .p-progressbar-indeterminate .p-progressbar-value:after {
    background-color: rgb(232, 179, 21) !important;

  1. March 9, 2019

    […] You can have a look at my other post about PrimeNg Progress Bar […]

Leave a Reply

Your email address will not be published. Required fields are marked *