@adobe/spectrum-css
Version:
The Spectrum CSS top-level backwards compatible package
90 lines (88 loc) • 1.96 kB
CSS
.spectrum-BarLoader {
position: relative;
display: -ms-inline-flexbox;
display: inline-flex;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
-ms-flex-pack: justify;
justify-content: space-between;
-ms-flex-align: center;
align-items: center;
width: 192px;
vertical-align: top;
}
.spectrum-BarLoader-track {
overflow: hidden;
width: 192px;
height: 6px;
border-radius: 3px;
z-index: 1;
}
.spectrum-BarLoader-fill {
border: none;
height: 6px;
transition: width 1s;
}
.spectrum-BarLoader-label,
.spectrum-BarLoader-percentage {
font-size: 12px;
font-weight: 400;
line-height: 1.3;
text-align: left;
margin-bottom: 9px;
}
.spectrum-BarLoader-label {
-ms-flex: 1 0 auto;
flex: 1 0 auto;
}
.spectrum-BarLoader-percentage {
-ms-flex-item-align: start;
align-self: flex-start;
margin-left: 12px;
}
.spectrum-BarLoader--sideLabel {
display: -ms-inline-flexbox;
display: inline-flex;
-ms-flex-flow: row;
flex-flow: row;
-ms-flex-pack: justify;
justify-content: space-between;
width: auto;
}
.spectrum-BarLoader--sideLabel .spectrum-BarLoader-label {
margin-right: 12px;
margin-bottom: 0;
}
.spectrum-BarLoader--sideLabel .spectrum-BarLoader-percentage {
-ms-flex-order: 3;
order: 3;
text-align: right;
margin-left: 12px;
margin-bottom: 0;
}
.spectrum-BarLoader--small {
min-width: 192px;
}
.spectrum-BarLoader--small .spectrum-BarLoader-fill {
height: 4px;
}
.spectrum-BarLoader--small .spectrum-BarLoader-track {
height: 4px;
border-radius: 2px;
}
.spectrum-BarLoader--indeterminate .spectrum-BarLoader-fill {
width: 136px;
position: relative;
animation: indeterminate-loop 1000ms infinite;
animation-timing-function: cubic-bezier(.45, 0, .40, 1);
left: -136px;
will-change: transform;
}
@keyframes indeterminate-loop {
0% {
transform: translate(0);
}
100% {
transform: translate(328px);
}
}