Hi Phil,
you can try this piece of code to achieve a circular progress bar:
import Felgo 3.0
import QtQuick 2.0
Rectangle {
color: "white"
property real value
property alias text: timeText.text
width: 40
height: 40
Text {
id: timeText
color: "#66bcb7"
font.pixelSize: 10
anchors.centerIn: parent
}
Row{
id: circle
property color circleColor: "transparent"
property color borderColor: "#66bcb7"
property int borderWidth: 2
anchors.centerIn: parent
width: parent.width-10
height: width
Item{
width: parent.width/2
height: parent.height
clip: true
Item{
id: part1
width: parent.width
height: parent.height
clip: true
rotation: value > 0.5 ? 360 : 180 + 360*value
transformOrigin: Item.Right
Rectangle{
width: circle.width-(circle.borderWidth*2)
height: circle.height-(circle.borderWidth*2)
radius: width/2
x:circle.borderWidth
y:circle.borderWidth
color: circle.circleColor
border.color: circle.borderColor
border.width: circle.borderWidth
smooth: true
}
}
}
Item{
width: parent.width/2
height: parent.height
clip: true
Item{
id: part2
width: parent.width
height: parent.height
clip: true
rotation: value <= 0.5 ? 180 : 360*(value)
transformOrigin: Item.Left
Rectangle{
width: circle.width-(circle.borderWidth*2)
height: circle.height-(circle.borderWidth*2)
radius: width/2
x: -width/2
y: circle.borderWidth
color: circle.circleColor
border.color: circle.borderColor
border.width: circle.borderWidth
smooth: true
}
}
}
}
}
The value property needs to be between 0.0 and 1.0
Cheers,
Alex