Ionic Progress Bar
The Ionic progress bar component is a horizontal progress bar that is used to visualize the progression of operation and activity. We can access the Ionic progress bar by using a standard <ion-progress-bar> component.
The Ionic progress bar is of two types, which are given below.
Determinate Progress bar
It is a type of progress bar, which can be used when the percentage of an operation is known. The determinate progress bar is a type of default progress bar, and the value property represents the progress.
The following example explains the determinate progress bar where the value property represents the progress.
When the above Ionic app is executed, it will give the following output.
Indeterminate Progress Bar
It is a type of progress bar, which tells the operation is in progress. It means there is no need to indicate how long it will take. If you add the property reversed="true", you receive a query that is used to indicate pre-loading. The following example explains it more clearly.
When you run the above code snippets, it will give the following output. Here, you will see that both the progress bar is animated in the opposite direction.
Buffer: It shows circles as animation for indicating some activity. If the value of the buffer property is less than one, you can show the additional buffering progress. We can understand the use of buffer attributes from the following example.
Colorize Progress Bar
The <ion-progress-bar> component can be colorized by using the color attributes. It can be explained from the following example.
Bind a variable with Progress Bar
We can also bind the progress bar with the value. To do this, we need to add the value in square brackets, which calls the variable bind to this value attribute. The following example explains it more clearly.
The home.page.html file contains the value attribute that calls the variable bind to this attribute. The corresponding logic is written in the home.page.ts file.
When you execute the above Ionic app, it will give the following output. Here, you will see that as the value exceeds, the progress bar will also exceed.