Skip to main content

angular material - How to change Progress bar width

app.component.ts 

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styles: [`
    /deep/ .mat-progress-bar{
      width: 200px !important;
    }
  `]
})


export class AppComponent { }
app.component.html 

<h2 style="padding-top:25px; padding-bottom:25px;">
    Angular Material - How to change Progress bar width
</h2>


<h3 style="margin-bottom:25px;">
    Progress bar width : 200 pixels
</h3>

<mat-progress-bar mode="indeterminate" >
</mat-progress-bar>
app.module.ts [import] 

import {MatProgressBarModule} from '@angular/material/progress-bar';
More Angular tutorials
Labels: