[Phil]

Hi. I have a timer that counts down during my game and I’d like to add some visuals to go with the timer text. What I want to achieve is something similar to the example here, would this be possible? Thanks, Phil

[AlexFelgo Team]

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

[Phil]

That’s perfect. Thanks!

[Felgo User]

But the above code only showing the circle. Can you please add the time and text to show the percentage progress?