CODEWITHSUNDEEP
angularangular-materialprogress-bar
Sai Nikhil
Sai Nikhil

Reputation: 1237

Angular Material Multi Progress Bar using multiple colors

What is the best way to achieve a Multi Progress Bar using Angular Material?

Multi Progress Bar

If it is not possible using Angular Material, can somebody please suggest me of any good graphing libraries that can be integrated with Angular to achieve the same?

Upvotes: 3

Views: 6377

Answers (2)

Qortex
Qortex

Reputation: 7466

I don't know of an easy way to do that staying inside Angular Material.

The easiest way is probably to go down the flex road, with some css styling.

I made a very basic Stackblitz to showcase the idea. Then you can CSS style all of this and get what you want.

Another way to go is to build the bar using SVG. You can achieve more powerful effects, but it comes at the cost of writing a bit of SVG yourself (basically rect elements, and then you can improve on that).

Edit: OP's fine-tuning of the Stackblitz to match the initial image: https://stackblitz.com/edit/angular-u2stx8.

Upvotes: 2

Mateusz
Mateusz

Reputation: 334

You can easily achieve a two-colour material progress bar and then you can play with buffer property to add some fireworks.

The first step is to add progress bar in html. I used "accent" as a color.

<mat-progress-bar mode="indeterminate" color="accent"></mat-progress-bar>

Then you have to import MatProgressBarModule into you app.module.ts file

Next, you have to define the accent colour with your favourites colours in styles.scss:

$accent: (
  50: red,
  100: blue,
  200: green,
  contrast: (
    50: pink
  )
);

$my-app-accent:  mat-palette($accent, 50, 100, 200);
$my-app-theme: mat-light-theme($my-app-primary, $my-app-accent);

If you have any problems during theming you angular material, check out manual: https://material.angular.io/guide/theming

Upvotes: 0

Related Questions