Angular Material Progress Bar

Angular Material Progress Bar: There are basically two types of progress bar available in Angular Material – Circular and Linear. The directive <md-progress-circular> is used to create circular progress bar and directive <md-progress-linear< is used to create linear progress bar. Here in this tutorial we are going to explain how you can use progress bars in Angular Material. You can also use our online editor to edit and run the code online.

Angular Material Progress Bar – Circular | Linear Progress Bar Example

Progress bar is basically used as indicator which represents that some background activity is going for example when content is loading and user is asked to wait a moment till it finishes. There are following types of progress bars let us go step by step –

• Circular Progress Bar
• Linear Progress Bar

Circular Progress bar

<md-progress-circular> directive is used to represent the content loading in your app. A circular loader is shown when some activity such as content loading is going on background. Let us first create a very basic example to understand how it works in real time.

<md-progress-circular md-mode="indeterminate"></md-progress-circular>

In the above example we have created simple circular progress bar which is in indeterminate state.

If you run the above example the output will look something like this –

Options For Circular Progress Bar

Following options are available for circular progress bar-

• * md-mode(string):
  This is used to set one of the mode – determinate or indeterminate.
• value(number):
  This is used to represent the % of the circular bar progress. Default value for this is 0.
• md-diameter(number):
  This is used to set the diameter of circular progress bar.
• ng-diabaled(boolean):
  This is used to disable the progress bar.

Linear Progress Bar

Linear Progress bar is also used to represent the loading state of content. The <md-progress-linear< directive is used to create the linear progress bar. Let us create a very basic example of linear progress bar-

<md-progress-linear md-mode="indeterminate"></md-progress-linear>

The above example is simple linear progress bar which has indeterminate mode.

The output of the above example will look something like this –

Options for Linear Progress Bar

• * md-mode(string):
  This is used to set one of the mode – determinate or indeterminate.
• value(number):
  This is used to represent the % of the linear bar progress. Default value for this is 0.
• md-buffer-value(number):
  This is used to set the percentage of secondary progress bar. Default value for this 0.
• ng-diabaled(boolean):
  This is used to disable the progress bar.

We will be adding more example soon..