Spaces:
Running
Running
File size: 1,779 Bytes
94004a2 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 | /* ── Progress primitive ─────────────────────────────────────────── */
.ui-progress {
width: 100%;
background: rgba(0, 0, 0, 0.3);
border-radius: var(--radius-sm);
overflow: hidden;
position: relative;
}
/* sizes */
.ui-progress--size-xs { height: 2px; }
.ui-progress--size-sm { height: 4px; }
.ui-progress--size-md { height: 6px; }
/* tones (fill colour) */
.ui-progress--brand .ui-progress__fill { background: linear-gradient(90deg, var(--color-brand), var(--color-accent)); }
.ui-progress--success .ui-progress__fill { background: linear-gradient(90deg, var(--color-success), var(--color-accent)); }
.ui-progress--warn .ui-progress__fill { background: linear-gradient(90deg, var(--color-accent), var(--color-warn)); }
.ui-progress--danger .ui-progress__fill { background: linear-gradient(90deg, var(--color-danger), var(--color-warn)); }
.ui-progress__fill {
height: 100%;
transition: width var(--dur-slow) var(--ease-out);
position: relative;
}
.ui-progress__fill.has-shimmer::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
background-size: 200% 100%;
animation: ui-shimmer 1.5s linear infinite;
}
@keyframes ui-shimmer {
0% { background-position: -200% 0; }
100% { background-position: 200% 0; }
}
/* indeterminate: sliding bar ~30% wide */
.ui-progress.is-indeterminate .ui-progress__fill {
width: 30%;
animation: ui-progress-indet 1.4s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
@keyframes ui-progress-indet {
0% { transform: translateX(-100%); }
100% { transform: translateX(433%); } /* (100% - 30%) / 30% * 100 + 100 */
}
|