@import "../colors"; @import "../globals"; @import "../mixins"; @import "./config"; .linear { position: relative; display: inline-block; width: 100%; height: $progress-height; overflow: hidden; background: $color-divider; &.indeterminate .value { transform-origin: center center; animation: linear-indeterminate-bar 1s linear infinite; } } .value, .buffer { position: absolute; top: 0; right: 0; bottom: 0; left: 0; transition-timing-function: $animation-curve-default; transition-duration: $animation-duration; transform: scaleX(0); transform-origin: left center; } .value { background-color: $progress-main-color; } [disabled] .value { background-color: $progress-disabled-color; } .buffer { background-image: linear-gradient(to right, $progress-secondary-color, $progress-secondary-color), linear-gradient(to right, $progress-main-color, $progress-main-color); } [disabled] .buffer { background-image: linear-gradient(to right, $progress-secondary-color, $progress-secondary-color), linear-gradient(to right, $progress-disabled-color, $progress-disabled-color); } .circular { position: relative; display: inline-block; width: $circle-wrapper-width * 1px; height: $circle-wrapper-width * 1px; transform: rotate(-90deg); &.indeterminate { .circle { animation: circular-indeterminate-bar-rotate 2s linear infinite; } .path { animation: circular-indeterminate-bar-dash 1.5s ease-in-out infinite; stroke-dasharray: $scale-ratio * 1, $scale-ratio * 200; stroke-dashoffset: 0; } &.multicolor .path { animation: circular-indeterminate-bar-dash 1.5s ease-in-out infinite, colors (1.5s * 4) ease-in-out infinite; } } } .circle { width: 100%; height: 100%; } .path { transition: stroke-dasharray $animation-duration $animation-curve-default; fill: none; stroke-dasharray: 0, $scale-ratio * 200; stroke-dashoffset: 0; stroke-linecap: round; stroke-miterlimit: 20; stroke-width: 4; stroke: $progress-main-color; } @keyframes linear-indeterminate-bar { 0% { transform: translate(-50%) scaleX(0); } 50% { transform: translate(-0%) scaleX(.3); } 100% { transform: translate(50%) scaleX(0); } } @keyframes circular-indeterminate-bar-rotate { 100% { transform: rotate(360deg); } } @keyframes circular-indeterminate-bar-dash { 0% { stroke-dasharray: $scale-ratio * 1, $scale-ratio * 200; stroke-dashoffset: $scale-ratio * 0; } 50% { stroke-dasharray: $scale-ratio * 89, $scale-ratio * 200; stroke-dashoffset: $scale-ratio * -35; } 100% { stroke-dasharray: $scale-ratio * 89, $scale-ratio * 200; stroke-dashoffset: $scale-ratio * -124; } } @keyframes colors { 0% { stroke: #4285f4; } 25% { stroke: #de3e35; } 50% { stroke: #f7c223; } 75% { stroke: #1b9a59; } 100% { stroke: #4285f4; } }