Binding Loop Error While Trying to Increment Progress

Question

I am trying to show incremental changes on a progress bar by clicking a mouse area. The code below compiles and changes the value of the progress bar from 0 to 0.25 after clicking the mouse area. But the change is not permanent. I am trying to increase the current each click by 0.25. I know my code is only setting the value to positive .25 each click. I am just at a loss for how I might increment change in progress bar without global vars. I included the transition to ensure the state change was irreversible, the code still compiles and runs the same. There are two issues.

1. My change is not permanent in the visible progress bar
2. My increments do not increase the total value, they are singular value assignments

ProgressBar{
    id: progressBar
    height: 20
    anchors.top: parent.top
    anchors.topMargin: 100
    anchors.horizontalCenter: parent.horizontalCenter
    opacity: 1
    value: 0
    states: State{
        name: "PressedAlso"
        when: mouseArea.pressed == true
        PropertyChanges{
            target: progressBar
            value: + 0.25
        }

    }

    transitions: Transition {
                from: ""; to: "PressedAlso"; reversible: false
    }
}

Answer 1

Your state PressedAlso means: when the mouse button is pressed, the value is 0.25. Otherwise, the value is implicitly 0.

If you want to increment by 0.25 by pressing the mouse button, you can use onPressed property in your MouseArea:

MouseArea {
  anchors.fill: parent
  id: mouseArea
  onPressed: progressBar.value += 1
}