Boolean
$progress-disable-everything: false !default;
Boolean
$progress-disable-linear: $disable-everything !default;
Boolean
$progress-disable-linear-vertical: false !default;
Boolean
$progress-disable-linear-horizontal: false !default;
Boolean
$progress-disable-linear-reverse: false !default;
Boolean
$progress-disable-circular: $disable-everything !default;
Boolean
$progress-disable-circular-centered-styles: false !default;
Boolean
$progress-disable-circular-rotate-only: false !default;
Boolean
$progress-disable-determinate: false !default;
Boolean
$progress-disable-indeterminate: false !default;
Color
$progress-color: theme.theme-get-var(primary-color) !default;
Color
$progress-background-color: color-mix(in srgb, currentcolor 66%, colors.$white) !default;
Number
$progress-circular-size: 3rem !default;
Number
$progress-circular-dense-size: 1.5rem !default;
Number
$progress-circular-stroke-width: 6 !default;
Number
$progress-circular-dasharray: 187 !default;
Number
$progress-circular-transition-duration: transition.$enter-duration !default;
Number
$progress-circular-indeterminate-transition-duration: 2.4s !default;
Number
$progress-circular-rotate-only-transition-duration: 1.2s !default;
Number
$progress-circular-rotate-only-dashoffset: $circular-dasharray * 0.4 !default;
Number
$progress-circular-start-offset: $circular-dasharray !default;
Number
$progress-circular-end-offset: $circular-dasharray * 0.25 !default;
Map
$progress-circular-rotate-styles: (
0%: (
transform: rotate(0deg),
),
50%: (
transform: rotate(135deg),
),
75%: (
transform: rotate(450deg),
),
100%: (
transform: rotate(720deg),
),
) !default;
Map
$progress-circular-dash-styles: (
0%: (
stroke-dashoffset: $circular-start-offset,
),
50%: (
stroke-dashoffset: $circular-end-offset,
),
100%: (
stroke-dashoffset: $circular-start-offset,
),
) !default;
Number
$progress-linear-size: 0.25rem !default;
Number
$progress-linear-transition-duration: 2.4s !default;
Number
$progress-linear-short-animation-delay: 0.75s !default;
Map
$progress-linear-styles: (
0%: (
left: -35%,
right: 100%,
),
60%: (
left: 100%,
right: -90%,
),
100%: (
left: 100%,
right: -90%,
),
) !default;
Map
$progress-linear-short-styles: (
0%: (
left: -200%,
right: 100%,
),
40%: (
left: 107%,
right: -8%,
),
100%: (
left: 107%,
right: -8%,
),
) !default;
Map
$progress-linear-reverse-styles: (
0%: (
left: 100%,
right: -35%,
),
60%: (
left: -90%,
right: 100%,
),
100%: (
left: -90%,
right: 100%,
),
) !default;
Map
$progress-linear-reverse-short-styles: (
0%: (
left: 100%,
right: -200%,
),
40%: (
left: -8%,
right: 107%,
),
100%: (
left: -8%,
right: 107%,
),
) !default;
Map
$progress-linear-vertical-styles: (
0%: (
bottom: -35%,
top: 100%,
),
60%: (
bottom: 100%,
top: -90%,
),
100%: (
bottom: 100%,
top: -90%,
),
) !default;
Map
$progress-linear-vertical-short-styles: (
0%: (
bottom: -200%,
top: 100%,
),
40%: (
bottom: 107%,
top: -8%,
),
100%: (
bottom: 107%,
top: -8%,
),
) !default;
Map
$progress-linear-vertical-reverse-styles: (
0%: (
bottom: 100%,
top: -35%,
),
60%: (
bottom: -90%,
top: 100%,
),
100%: (
bottom: -90%,
top: 100%,
),
) !default;
Map
$progress-linear-vertical-reverse-short-styles: (
0%: (
bottom: 100%,
top: -200%,
),
40%: (
bottom: -8%,
top: 107%,
),
100%: (
bottom: -8%,
top: 107%,
),
) !default;
List
$progress-variables: (
background-color,
color,
circular-size,
circular-stroke-width,
linear-size
);
mixin
@mixin set-var($name, $value) { … }
mixin
@mixin use-var($property, $name: $property, $fallback: null) { … }
mixin
@mixin variables { … }
mixin
@mixin styles($disable-layer: false) { … }
function
@function get-var($name, $fallback: null) { … }
String
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