src/scss/progress.scss
// wrapper is needed to allow progress bar grow from bottom upwards
.mdc-Progress-linear {
height: 4px;
display: flex;
align-items: flex-end;
overflow: hidden;
}
.mdc-Progress-linear-background {
background-color: rgba(63, 81, 181, 0.3);
flex: 1;
height: 100%;
will-change: transform;
transform: translate3d(0, 100%, 0);
transition: 250ms transform 150ms ease-in-out;
}
.mdc-Progress-linear-background.is-active {
transition: transform 250ms ease-in-out;
transform: translate3d(0, 0, 0);
}
.mdc-Progress-linear-inner {
height: inherit;
background-color: #3f51b5;
// https://github.com/google/material-design-lite/blob/master/src/_variables.scss#L497
transition: width 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.mdc-Progress-circular {
transform-origin: center;
transform: rotate(-90deg);
}
.mdc-Progress-circular-path {
stroke: #3f51b5;
transition: stroke-dashoffset 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}