Progress Sass API

Variables

progress-disable-everything

$progress-disable-everything: false !default;

progress-disable-linear

$progress-disable-linear: $disable-everything !default;

Used By

• @mixin progress-variables
• @mixin progress-styles

progress-disable-linear-vertical

$progress-disable-linear-vertical: false !default;

Used By

• @mixin progress-_linear-progress-bar
• @mixin progress-_linear-progress

progress-disable-linear-horizontal

$progress-disable-linear-horizontal: false !default;

Used By

• @mixin progress-_linear-progress-bar
• @mixin progress-_linear-progress

progress-disable-linear-reverse

$progress-disable-linear-reverse: false !default;

Used By

• @mixin progress-_linear-progress-bar
• @mixin progress-_linear-progress

progress-disable-circular

$progress-disable-circular: $disable-everything !default;

Used By

• @mixin progress-variables
• @mixin progress-styles

progress-disable-circular-centered-styles

$progress-disable-circular-centered-styles: false !default;

Used By

• @mixin progress-_circular-progress

progress-disable-circular-rotate-only

$progress-disable-circular-rotate-only: false !default;

Used By

• @mixin progress-_circular-progress

progress-disable-determinate

$progress-disable-determinate: false !default;

Used By

• @mixin progress-_circular-progress
• @mixin progress-_linear-progress-bar

progress-disable-indeterminate

$progress-disable-indeterminate: false !default;

Used By

• @mixin progress-_circular-progress
• @mixin progress-_linear-progress-bar

progress-color

$progress-color: theme.theme-get-var(primary-color) !default;

See Also

• $avatar-background-color

progress-background-color

$progress-background-color: color-mix(in srgb, currentcolor 66%, colors.$white) !default;

See Also

• $avatar-color

progress-circular-size

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

Used By

• @mixin progress-variables

progress-circular-dense-size

$progress-circular-dense-size: 1.5rem !default;

Used By

• @mixin progress-_circular-progress

progress-circular-stroke-width

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

Used By

• @mixin progress-variables

progress-circular-dasharray

$progress-circular-dasharray: 187 !default;

Used By

• @mixin progress-_circular-progress

progress-circular-transition-duration

$progress-circular-transition-duration: transition.$enter-duration !default;

Used By

• @mixin progress-_circular-progress

progress-circular-indeterminate-transition-duration

$progress-circular-indeterminate-transition-duration: 2.4s !default;

Used By

• @mixin progress-_circular-progress

progress-circular-rotate-only-transition-duration

$progress-circular-rotate-only-transition-duration: 1.2s !default;

Used By

• @mixin progress-_circular-progress

progress-circular-rotate-only-dashoffset

$progress-circular-rotate-only-dashoffset: $circular-dasharray * 0.4 !default;

Used By

• @mixin progress-_circular-progress

progress-circular-start-offset

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

progress-circular-end-offset

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

progress-circular-rotate-styles

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

Used By

• @mixin progress-_circular-progress

progress-circular-dash-styles

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

Used By

• @mixin progress-_circular-progress

progress-linear-size

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

Used By

• @mixin progress-variables

progress-linear-transition-duration

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

Used By

• @mixin progress-_linear-progress-bar

progress-linear-short-animation-delay

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

Used By

• @mixin progress-_linear-progress-bar

progress-linear-styles

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

Used By

• @mixin progress-_linear-progress

progress-linear-short-styles

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

Used By

• @mixin progress-_linear-progress

progress-linear-reverse-styles

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

Used By

• @mixin progress-_linear-progress

progress-linear-reverse-short-styles

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

Used By

• @mixin progress-_linear-progress

progress-linear-vertical-styles

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

Used By

• @mixin progress-_linear-progress

progress-linear-vertical-short-styles

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

Used By

• @mixin progress-_linear-progress

progress-linear-vertical-reverse-styles

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

Used By

• @mixin progress-_linear-progress

progress-linear-vertical-reverse-short-styles

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

Used By

• @mixin progress-_linear-progress

progress-variables

$progress-variables: (
  background-color,
  color,
  circular-size,
  circular-stroke-width,
  linear-size
);

Mixins

progress-set-var

@mixin set-var($name, $value) { … }

Requires

• @function get-var-name
• @mixin app-bar-variables

progress-use-var

@mixin use-var($property, $name: $property, $fallback: null) { … }

Requires

• @function app-bar-get-var

progress-variables

@mixin variables { … }

Requires

• @mixin app-bar-set-var
• @function is-theme-color-var
• $progress-disable-circular
• $progress-circular-size
• $progress-circular-stroke-width
• $progress-disable-linear
• $avatar-background-color
• $avatar-color
• $progress-linear-size

progress-styles

@mixin styles($disable-layer: false) { … }

Requires

• @mixin progress-_circular-progress
• @mixin progress-_linear-progress
• $progress-disable-circular
• $progress-disable-linear

Functions

progress-get-var

@function get-var($name, $fallback: null) { … }

Returns — String

Requires

• @function get-var-name
• @mixin app-bar-variables

Set to true to disable all the styles.

Set to true to disable the LinearProgress styles.

Set to true to disable the LinearProgress vertical styles.

Set to true to disable the LinearProgress horizontal styles.

Set to true to disable the LinearProgress reversed styles.

Set to true to only disable the CircularProgress styles.

Set to true to disable the CircularProgress centered styles.

Set this to true if the rotate-only animation is not needed for the CircularProgress.

Set to true to disable only the determinate progress styles.

Set to true to disable only the indeterminate progress styles.

This is the default prominent color for the LinearProgress component that helps indicate the current progress. This covers the $background-color.

This is the default background-color/secondary color for the LinearProgress component that is used as the full track color. This is covered by the $color.

The default CircularProgress size.

The default dense CircularProgress size.

The default svg stroke-width for the CircularProgress.

The default svg stroke-dasharray for the CircularProgress.

The default transition duration for the determinate CircularProgress to animate to new values.

The default transition duration for the indeterminate CircularProgress.

The default transition duration for the indeterminate CircularProgress that only rotates to improve performance.

The default svg stroke-dashoffset for the indeterminate CircularProgress that only rotates to improve performance.

The default starting stroke-dashoffset for the CircularProgress animation.

The default ending stroke-dashoffset for the CircularProgress animation.

Used to generate the @keyframes rmd-progress-rotate for the indeterminate CircularProgress.

Used to generate the @keyframes rmd-circular-progress-size for the indeterminate CircularProgress.

The default height/width for the LinearProgress.

The default transition duration for the LinearProgress keyframes animation.

The default transition duration for the LinearProgress keyframes animation that is a bit quicker.

Used to generate the @keyframes rmd-progress-bar for the indeterminate LinearProgress.

Used to generate the @keyframes rmd-progress-bar-short for the indeterminate LinearProgress.

Used to generate the @keyframes rmd-progress-bar-reverse for the reversed indeterminate LinearProgress.

Used to generate the @keyframes rmd-progress-bar-reverse-short for the reversed indeterminate LinearProgress that is a bit quicker.

Used to generate the @keyframes rmd-progress-bar-vertical for the vertical indeterminate LinearProgress.

Used to generate the @keyframes rmd-progress-bar-vertical-short for the vertical indeterminate LinearProgress that is a bit quicker.

Used to generate the @keyframes rmd-progress-bar-vertical-reversed for the vertical reversed indeterminate LinearProgress.

Used to generate the @keyframes rmd-progress-bar-vertical-reversed-short for the vertical reversed indeterminate LinearProgress that is a bit quicker.

The available configurable css variables and mostly used internally for the get-var, set-var, and use-var utils.

The supported variable name

The value to set the variable to. Supports null which will just be a no-op.

The css property to apply the variable to

The supported variable name

An optional fallback value if the variable has not been set

Conditionally applies the css variables based on feature flags

Generates all the styles based on feature flags.

Set this to true to disable the layer behavior

a var() statement

The supported variable name

An optional fallback value