material-progress

A Material-style progress bar for Angular 2 Dart.

Usage

After importing it, add the MaterialProgress component to your component's directives and use it in the template.

<material-progress></material-progress>

Styling

You can style this component with the provided material colors classes. These classes are named respecting BEM methodology with "Two Dashes" style.

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 class from each list directly into the component tag:

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

Example

MaterialProgress examples

Overrides

You can override the component style in the host's CSS using :host and /deep/ special selectors.

/* 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.