Thanks, I tried the OpacityMask again as you suggested and it works now. It took me a bit to get it right, because i) I had a warning about the recursive property in ShaderEffectSource needing to be set to "true" and ii) the mask size needs to be the same as the source size for it to work properly. After a while I noticed that i) originated from some code in the contentItem of the button using the ColorOverlay (in fact it was the same problem there i.e. I tried to apply it to the parent). To fix ii) I used a transparent frame so that the code now looks something like:
background:
Item{
width: control.width
height: control.height
Rectangle{
id: progressFrame
anchors.fill: parent
color: "transparent"
visible: false
Rectangle{
id: progressRect
width: 0.7*parent.width
height: parent.height
anchors.verticalCenter: parent.verticalCenter
anchors.left: parent.left
color: "green"
}
}
Rectangle {
id: backgroundRect
anchors.fill: parent
radius: height / 2
color: "red"
visible: true
}
OpacityMask{
anchors.fill: progressFrame
source: progressFrame
maskSource: backgroundRect
}
}
Resulting in:
[image: a7ae420c-4af3-47fd-b9d6-280eb03d86bb.png]
Thanks again!
