demos/declarative/flickr/content/Progress.qml


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

Item {
    id: Progress;

    property var progress: 0

    Rect {
        id: Container; anchors.fill: parent; gradientColor: "#66000000";
        pen.color: "white"; pen.width: 0;  color: "#66343434"; radius: height/2 - 2
    }

    Rect {
        id: Fill
        y: 2; height: parent.height-4;
        x: 2; width: Math.max(parent.width * progress - 4, 0);
        opacity: width < 1 ? 0 : 1
        color: "lightsteelblue"; gradientColor: "steelblue"; radius: height/2 - 2
    }

    Text {
        text: Math.round(progress * 100) + "%"
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.verticalCenter: parent.verticalCenter
        color: "white"; font.bold: true
    }
}