material-progress

A material progress bar for Angular 2 Dart.

Usage

Add the MaterialProgress component to your component's directives and use it in your templates.

<material-progress></material-progress>

Styling

You can style this component with the provided material colors classes.

Change container color

  • material-progress__container--color_black
  • material-progress__container--color_white

Change progress bar color

  • material-progress--color-red
  • material-progress--color-green
  • material-progress--color-blue
  • material-progress--color-yellow
  • material-progress--color-black
  • material-progress--color-white

Just apply one of each type directly into the component tag:

<material-progress class="material-progress__container--color_white material-progress--color-black"></material-progress>

Overrides

You can override the component style in the host's CSS like this:

/* Change the container color */
:host >>> .material-progress {
    background-color: blue !important;
}

/* Change the progress bar color */
:host >>> .material-progress {
    background-color: #1cb7cc !important;
}

Libraries

material_progress

A simple Material-style progress bar for Angular 2 Dart.