react-md
react-md - Progress - SassDoc

Variables

rmd-progress-include-linear

Boolean

Boolean if the linear progress bar styles should be created by default.

$rmd-progress-include-linear: true !default;
Used By

rmd-progress-include-circular

Boolean

Boolean if the circular progress bar styles should be created by default.

$rmd-progress-include-circular: true !default;
Used By

rmd-progress-color

Color

This is the main color that should be used for the linear progress and the circular progress components.

$rmd-progress-color: $rmd-theme-primary !default;
Requires

rmd-progress-background-color

Color

This is the background color that is used fot the linear progress only. You normally want this color to be a bit ligher than the main progress color since it'll be underneath the main progress.

$rmd-progress-background-color: rmd-theme-get-swatch(
  $rmd-theme-primary,
  300,
  false,
  rgba($rmd-theme-primary, 0.4),
  rmd-progress-background-color
) !default;
Requires

rmd-linear-progress-size

Number

This is the linear progress bar's height or the width when switched to vertical.

$rmd-linear-progress-size: 0.25rem !default;

rmd-linear-progress-transition-duration

Number

The transition duration for the entire linear progress animation. This one is much longer compared to other transitions since progress indicators are normally for longer running background tasks.

$rmd-linear-progress-transition-duration: 2.4s !default;
Used By

rmd-linear-progress-short-animation-delay

Number

The delay before the second linear progress animation should start. This animation is for the very quick and smaller bar animation that will appear after the first transition is near the end.

$rmd-linear-progress-short-animation-delay: 0.75s !default;
Used By

rmd-linear-progress-styles

Map

The linear progress bar styles to apply for the transition. Each key in this map will be set immediately at the root of the keyframes and then each child map will be considered a map of property: value.

$rmd-linear-progress-styles: (
  0%: (
    left: -35%,
    right: 100%,
  ),
  60%: (
    left: 100%,
    right: -90%,
  ),
  100%: (
    left: 100%,
    right: -90%,
  ),
) !default;
Used By

rmd-linear-progress-short-styles

Map

The linear progress bar styles to apply for the shorter transition. Each key in this map will be set immediately at the root of the keyframes and then each child map will be considered a map of property: value.

$rmd-linear-progress-short-styles: (
  0%: (
    left: -200%,
    right: 100%,
  ),
  40%: (
    left: 107%,
    right: -8%,
  ),
  100%: (
    left: 107%,
    right: -8%,
  ),
) !default;
Used By

rmd-linear-progress-reverse-styles

Map

The linear progress bar styles to apply for the transition. Each key in this map will be set immediately at the root of the keyframes and then each child map will be considered a map of property: value.

$rmd-linear-progress-reverse-styles: (
  0%: (
    left: 100%,
    right: -35%,
  ),
  60%: (
    left: -90%,
    right: 100%,
  ),
  100%: (
    left: -90%,
    right: 100%,
  ),
) !default;
Used By

rmd-linear-progress-reverse-short-styles

Map

The linear progress bar styles to apply for the shorter transition. Each key in this map will be set immediately at the root of the keyframes and then each child map will be considered a map of property: value.

$rmd-linear-progress-reverse-short-styles: (
  0%: (
    left: 100%,
    right: -200%,
  ),
  40%: (
    left: -8%,
    right: 107%,
  ),
  100%: (
    left: -8%,
    right: 107%,
  ),
) !default;
Used By

rmd-linear-progress-vertical-styles

Map

The linear progress bar styles to apply for the vertical transition. Each key in this map will be set immediately at the root of the keyframes and then each child map will be considered a map of property: value.

$rmd-linear-progress-vertical-styles: (
  0%: (
    bottom: -35%,
    top: 100%,
  ),
  60%: (
    bottom: 100%,
    top: -90%,
  ),
  100%: (
    bottom: 100%,
    top: -90%,
  ),
) !default;
Used By

rmd-linear-progress-vertical-short-styles

Map

The linear progress bar styles to apply for the shorter vertical transition. Each key in this map will be set immediately at the root of the keyframes and then each child map will be considered a map of property: value.

$rmd-linear-progress-vertical-short-styles: (
  0%: (
    bottom: -200%,
    top: 100%,
  ),
  40%: (
    bottom: 107%,
    top: -8%,
  ),
  100%: (
    bottom: 107%,
    top: -8%,
  ),
) !default;
Used By

rmd-linear-progress-vertical-reverse-styles

Map

The linear progress bar styles to apply for the vertical transition. Each key in this map will be set immediately at the root of the keyframes and then each child map will be considered a map of property: value.

$rmd-linear-progress-vertical-reverse-styles: (
  0%: (
    bottom: 100%,
    top: -35%,
  ),
  60%: (
    bottom: -90%,
    top: 100%,
  ),
  100%: (
    bottom: -90%,
    top: 100%,
  ),
) !default;
Used By

rmd-linear-progress-vertical-reverse-short-styles

Map

The linear progress bar styles to apply for the shorter vertical transition. Each key in this map will be set immediately at the root of the keyframes and then each child map will be considered a map of property: value.

$rmd-linear-progress-vertical-reverse-short-styles: (
  0%: (
    bottom: 100%,
    top: -200%,
  ),
  40%: (
    bottom: -8%,
    top: 107%,
  ),
  100%: (
    bottom: -8%,
    top: 107%,
  ),
) !default;
Used By

rmd-circular-progress-size

Number

The size for the circular progress svg.

$rmd-circular-progress-size: 3rem !default;

rmd-circular-progress-small-size

Since v2.3.0

String|Number

The size for a small circular progress svg. This is really the same size as the $rmd-icon-size so it could be used instead if the @react-md/icon package has also been installed.

$rmd-circular-progress-small-size: 1.5rem !default;
Used By

rmd-circular-progress-stroke-width

Number

The stroke width for the circular svg. I wouldn't change this value unless you also update the viewbox for the CircularProgress component.

$rmd-circular-progress-stroke-width: 6 !default;

rmd-circular-progress-dasharray

Number

The dasharray fro the circular svg. I don't really know how this works so good luck changing it to something else. If this value is changed, you'll aslo need to update the dasharray prop for the CircularProgress component.

$rmd-circular-progress-dasharray: 187 !default;
Used By

rmd-circular-progress-transition-duration

Number

The entire transition duration for the circular progress. This is really the full time for the change in the stroke-dashoffset as the default rotation will rotate 720deg over this time.

$rmd-circular-progress-transition-duration: 2.4s !default;
Used By

rmd-circular-progress-start-offset

Number

The starting dashoffset for the ciruclar progress animation. This will be used for the 0% and 100% values in the animation keyframes by default.

$rmd-circular-progress-start-offset: $rmd-circular-progress-dasharray !default;

rmd-circular-progress-end-offset

Number

The ending dashoffset for the ciruclar progress animation. This will be used for the 50% value in the animation keyframes by default.

$rmd-circular-progress-end-offset: $rmd-circular-progress-dasharray * 0.25 !default;

rmd-circular-progress-rotate-styles

Map

The circular progress styles to apply for the rotation transition. Each key in this map will be set immediately at the root of the keyframes and then each child map will be considered a map of property: value.

$rmd-circular-progress-rotate-styles: (
  0%: (
    transform: rotate(0deg),
  ),
  50%: (
    transform: rotate(135deg),
  ),
  75%: (
    transform: rotate(450deg),
  ),
  100%: (
    transform: rotate(720deg),
  ),
) !default;
Used By

rmd-circular-progress-dash-styles

Map

The circular progress styles to apply for the dashoffset transition. Each key in this map will be set immediately at the root of the keyframes and then each child map will be considered a map of property: value.

$rmd-circular-progress-dash-styles: (
  0%: (
    stroke-dashoffset: $rmd-circular-progress-start-offset,
  ),
  50%: (
    stroke-dashoffset: $rmd-circular-progress-end-offset,
  ),
  100%: (
    stroke-dashoffset: $rmd-circular-progress-start-offset,
  ),
) !default;
Used By

rmd-progress-theme-values

Map

A Map of all the "themeable" parts of the progress package. Every key in this map will be used to create a css variable to dynamically update the values of the icon as needed.

$rmd-progress-theme-values: (
  color: $rmd-progress-color,
  background-color: $rmd-progress-background-color,
  linear-size: $rmd-linear-progress-size,
  circular-size: $rmd-circular-progress-size,
  circular-width: $rmd-circular-progress-stroke-width,
) !default;
Used By

Mixins

rmd-progress-theme

mixin

Creates the styles for one of the progress's theme values. This is mostly going to be an internal helper mixin util.

Parameters
NameDescriptionTypeDefault Value
$property

The property to set a rmd-progress-theme-values value to.

String—
$theme-style

One of the keys of rmd-progress-theme-values to extract a value from.

String—
$fallback

A fallback value to use if the css variable isn't set somehow. This will default to automatically retrieving the default value from the rmd-progress-theme-values map when null.

Color|String|Numbernull
Used By
Requires

rmd-progress-theme-update-var

mixin

Updates one of the progress's theme variables with the new value for the section of your app.

Parameters
NameDescriptionTypeDefault Value
$theme-style

The progress theme style type to update. This should be one of the $rmd-progress-theme-values keys.

String—
$value

The new value to use.

Color|String|Number—
Used By
Requires

rmd-progress-animation

mixin

Creates the styles for the progress animation

Parameters
NameDescriptionTypeDefault Value
$styles

The current animation styles to use

Map—
Used By
Requires

rmd-linear-progress-bar-styles

mixin
Used By
Requires

rmd-linear-progress-bar

mixin
Used By
Requires

rmd-linear-progress

mixin

Creates the styles for the linear progress bar.

Used By
Requires

rmd-circular-progress

mixin
Used By
Requires

react-md-progress

mixin

Creates all the styles for the progress package.

Used By
Requires

Functions

rmd-progress-theme

function

This function is used to quickly get one of the progress's theme values. This is really just for the rmd-progress-theme mixin to provide some validation that a correct style key is used, but might be useful in other cases.

Returns — Color|String|Number

one of the progress's theme values.

Parameters
NameDescriptionTypeDefault Value
$theme-style

One of the $rmd-progress-theme-values map keys to get a value for.

String—
Requires

rmd-progress-theme-var

function

This function is used to get one of the progress's theme variables as a CSS Variable to be applied as a style attribute. By default, the CSS Variable will have a fallback of the current $rmd-progress-theme-values

This function is used to create a CSS Variable declaration with an optional fallback value if the CSS Variable has not been declared somehow.

Returns — String

one of the progress's theme values as a css variable.

Parameters
NameDescriptionTypeDefault Value
$theme-style

One of the $rmd-progress-theme-values map keys to set a value for.

String—
$fallback

An optional fallback color to apply. This is set to null by default and not used since the link's theme variables should always exist.

Color|String|Numbernull
Requires