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:
0_1516730617237_960aab10-96cd-4f9e-b86d-afd96504a439-image.png

Thanks again!

"QWebElement parse" cannot return any element!!

@Chris-Kawa thanks for the hint. Works now :)