Circular Progress

Variables

md-progress-include-circular
$md-progress-include-circular: true !default;
Sass (Scss)

Description

Boolean if the circular progress bars should be included.

Type

Boolean
md-progress-include-linear
$md-progress-include-linear: true !default;
Sass (Scss)

Description

Boolean if the linear progress bars should be included.

Type

Boolean

Used by

md-progress-margin
$md-progress-margin: 1em !default;
Sass (Scss)

Description

The top and bottom margin to apply to the circular and linear progress.

Type

Number

Used by

md-progress-duration
$md-progress-duration: 2.4s !default;
Sass (Scss)

Description

The duration for one cycle of the circular progress animation.

Type

Number

Used by

md-circular-progress-stroke-dasharray
$md-circular-progress-stroke-dasharray: 187px !default;
Sass (Scss)

Description

The initial stroke-dasharray for the indeterminate progress. I have no idea how this stuff works.. So change have fun changing that.

Type

Number

Used by

md-linear-progress-height
$md-linear-progress-height: 3px !default;
Sass (Scss)

Description

The linear progress's bar height.

Type

Number

Used by

md-linear-progress-delay
$md-linear-progress-delay: 1.15s !default;
Sass (Scss)

Description

The amount of time the animation should delay for linear progress bars.

Type

Number

Used by

md-linear-progress-swatch
$md-linear-progress-swatch: 100 !default;
Sass (Scss)

Description

The default swatch to use for the default linear progress bar background. This should be either: 100, 200, 400, or 700.

Type

Number

Used by

md-linear-progress-fallback-color
$md-linear-progress-fallback-color: null !default;
Sass (Scss)

Description

An optional fallback color to use for the linear progress's background. This is only required when the $md-secondary-color is not a valid material design color.

Type

Color

Used by

See

Mixins

react-md-progress
@mixin react-md-progress($secondary-color: $md-secondary-color, $linear-swatch: $md-linear-progress-swatch, $include-circular: $md-progress-include-circular, $include-linear: $md-progress-include-linear) {}
Sass (Scss)
Click to expand

Description

Includes the styles for progress bars if either $include-circular and/or $include-linear are true.

Progress bars are always styled with the secondary-color. When using a linear progress bar, the default background will be a swatch that is lighter than the secondary-color.

Parameters

NameDescriptionTypeDefault value
$secondary-color

The secondary color to theme progress bars with.

Color
$md-secondary-color
$linear-swatch

The swatch number to use for a linear progress bar's default background. This should be either 100, 200, 400, or 700.

Number
$md-linear-progress-swatch
$include-circular

Boolean if the circular progress styles should be included.

Boolean
$md-progress-include-circular
$include-linear

Boolean if the linear progress styles should be included.

Boolean
$md-progress-include-linear

Requires

Used by

react-md-progress-circular
@mixin react-md-progress-circular($secondary-color: $md-secondary-color) {}
Sass (Scss)
Click to expand

Description

Creates the styles for a circular progress bar.

Parameters

NameDescriptionTypeDefault value
$secondary-color

The secondary color to theme with.

Color
$md-secondary-color

Examples

Example Usage SCSS

@include react-md-progress-circular;
Sass (Scss)

Requires

Used by

react-md-progress-linear
@mixin react-md-progress-linear($secondary-color: $md-secondary-color, $swatch: $md-linear-progress-swatch, $fallback-color: $md-linear-progress) {}
Sass (Scss)
Click to expand

Description

Creates the styles for a linear progress bar.

Parameters

NameDescriptionTypeDefault value
$secondary-color

The secondary color to theme with.

Color
$md-secondary-color
$swatch

The swatch to use for the unmoving background.

Number
$md-linear-progress-swatch
$fallback-color

An optional fallback color to use when the secondary color is not a valid material design color.

Color
$md-linear-progress

Examples

Example Usage SCSS

@include react-md-progress-linear;
Sass (Scss)

Requires

Used by

react-md-theme-progress
@mixin react-md-theme-progress($secondary-color: $md-secondary-color, $linear-swatch: $md-linear-progress-swatch, $include-circular: $md-progress-include-circular, $include-linear: $md-progress-include-linear, $fallback-color: $md-linear-progress) {}
Sass (Scss)
Click to expand

Description

Updates the theme for progress bars.

Parameters

NameDescriptionTypeDefault value
$secondary-color

The secondary color to theme progress bars with.

Color
$md-secondary-color
$linear-swatch

The swatch number to use for a linear progress bar's default background. This should be either 100, 200, 400, or 700.

Number
$md-linear-progress-swatch
$include-circular

Boolean if the circular progress styles should be included.

Boolean
$md-progress-include-circular
$include-linear

Boolean if the linear progress styles should be included.

Boolean
$md-progress-include-linear
$fallback-color

An optional fallback color to use when the secondary color is not a valid material design color.

Color
$md-linear-progress

Examples

Example Usage SCSS

@include react-md-theme-progress($md-deep-orange-a-700, 200);
Sass (Scss)

Requires

Used by

react-md-theme-progress-circular
@mixin react-md-theme-progress-circular($secondary-color: $md-secondary-color) {}
Sass (Scss)
Click to expand

Description

Themes the circular progress bars only when the $secondary-color does not equal the $md-secondary-color.

Parameters

NameDescriptionTypeDefault value
$secondary-color

The secondary color to theme progress bars with.

Color
$md-secondary-color

Examples

Example Usage SCSS

@include react-md-theme-progress-circular($md-orange-a-700);
Sass (Scss)

Requires

Used by

react-md-theme-progress-linear
@mixin react-md-theme-progress-linear($secondary-color: $md-secondary-color, $swatch: $md-linear-progress-swatch, $fallback-color: $md-linear-progress) {}
Sass (Scss)
Click to expand

Description

Themes only the linear progress bars when the $secondary-color does not equal the $md-secondary-color OR the $swatch does not equal the $md-linear-progress-swatch.

Parameters

NameDescriptionTypeDefault value
$secondary-color

The secondary color to theme progress bars with.

Color
$md-secondary-color
$swatch

The swatch number to use for a linear progress bar's default background. This should be either 100, 200, 400, or 700.

Number
$md-linear-progress-swatch
$fallback-color

An optional fallback color to use when the secondary color is not a valid material design color.

Color
$md-linear-progress

Examples

Example Usage SCSS

@include react-md-theme-progress-linear($md-orange-a-700, 200);
Sass (Scss)

Requires

Used by