37 lines
1.2 KiB
Plaintext
37 lines
1.2 KiB
Plaintext
import { Theme, SpacingSystem, Typography, Animations } from "../theme/theme.slint";
|
|
|
|
export component Progress {
|
|
in property <float> value: 0; // 0-100
|
|
in property <bool> show-label: false;
|
|
|
|
min-height: 8px;
|
|
|
|
VerticalLayout {
|
|
spacing: SpacingSystem.spacing.s1;
|
|
|
|
// Progress bar
|
|
track := Rectangle {
|
|
height: 8px;
|
|
background: Theme.colors.primary.transparentize(0.8);
|
|
border-radius: SpacingSystem.radius.full;
|
|
|
|
indicator := Rectangle {
|
|
width: parent.width * Math.max(0, Math.min(100, root.value)) / 100;
|
|
height: parent.height;
|
|
background: Theme.colors.primary;
|
|
border-radius: SpacingSystem.radius.full;
|
|
|
|
animate width { duration: Animations.durations.normal; easing: Animations.ease-out; }
|
|
}
|
|
}
|
|
|
|
// Optional label
|
|
if root.show-label: label := Text {
|
|
text: Math.round(root.value) + "%";
|
|
color: Theme.colors.muted-foreground;
|
|
font-size: Typography.sizes.xs;
|
|
horizontal-alignment: right;
|
|
}
|
|
}
|
|
}
|