material_progress 1.0.0

  • Installing
  • Versions
  • 0


A Material-style progress bar for Angular 2 Dart.


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



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>


MaterialProgress examples


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;



  • Initial version, including:
    • indeterminate progress bar
    • basic color palette for styling

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:

  material_progress: ^1.0.0

2. Install it

You can install packages from the command line:

with pub:

$ pub get

Alternatively, your editor might support pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:

import 'package:material_progress/material_progress.dart';
Version Uploaded Documentation Archive
1.0.0 Sep 14, 2016 Go to the documentation of material_progress 1.0.0 Download material_progress 1.0.0 archive
0.0.1 Sep 13, 2016 Go to the documentation of material_progress 0.0.1 Download material_progress 0.0.1 archive
Describes how popular the package is relative to other packages. [more]
Code health derived from static analysis. [more]
Reflects how tidy and up-to-date the package is. [more]
Weighted score of the above. [more]
Learn more about scoring.

The package version is not analyzed, because it does not support Dart 2. Until this is resolved, the package will receive a health and maintenance score of 0.

Analysis issues and suggestions

Support Dart 2 in pubspec.yaml.

The SDK constraint in pubspec.yaml doesn't allow the Dart 2.0.0 release. For information about upgrading it to be Dart 2 compatible, please see

Maintenance issues and suggestions

Running dartdoc failed. (-10 points)

Make sure dartdoc runs without any issues.


Package Constraint Resolved Available
Direct dependencies
Dart SDK >=1.16.0 <2.0.0