How to Easily Add a Progress Bar to Your Angular App
![](/images/code-with-jacob-profile-pic-teal-small.jpg)
Jacob Naryan - Full-Stack Developer
Posted: Tue Jul 25 2023
Last updated: Wed Nov 22 2023
Angular Material provides a rich set of pre-built UI components to integrate into Angular applications. One of these components is the ‘Progress Bar’. In this post, we will be diving into how to use the <mat-progress-bar> component, specifically focusing on its indeterminate mode.
1. Setting Up Your Angular Environment
Before we get started, you must have an Angular environment set up. If you haven’t done so already, you can follow the official Angular Setup Guide to create a new project.
2. Installing Angular Material
After setting up your Angular environment, you need to install Angular Material. You can do this by running the following command in your terminal:
ng add @angular/material
This will install Angular Material and configure your application to use it.
3. Importing the MatProgressBarModule
You need to import the MatProgressBarModule in your application module to use the <mat-progress-bar> component:
import { MatProgressBarModule } from '@angular/material/progress-bar';
@NgModule({
...
imports: [
MatProgressBarModule,
...
],
})
export class AppModule { }
4. Using the <mat-progress-bar> Component
The <mat-progress-bar> component can be used in your component's template. Here's an example:
<mat-progress-bar mode="indeterminate"></mat-progress-bar>
In this example, we’re using the mode attribute with a value of "indeterminate". This represents a loading process of an unknown duration.
5. Styling Your Progress Bar
You can style your progress bar by using CSS classes or inline styles. Here’s an example where we’re setting the color of the progress bar to ‘accent’ and styling it with a CSS class:
<mat-progress-bar mode="indeterminate" color="accent" class="my-progress-bar"></mat-progress-bar>
And here’s how you might define that class in your CSS:
.my-progress-bar {
width: 100%;
height: 20px;
}
Conclusion
And there you have it! You’ve just learned how to use the <mat-progress-bar> component in Angular Material. The Progress Bar component can be extremely helpful in communicating loading states to your users, making for a much smoother user experience. Happy coding!
Thank you for reading. If you liked this blog check out more tutorials about software engineering here.
Thanks for reading, please consider tipping some BTC if you liked the blog!
Click or scan the QR code below.
![bitcoin address for tips if you are so inclined.](/images/bitcoin-address.png)