material_progress 1.0.0

A material progress bar for Angular 2 Dart.

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;
}