QML - problem on updating rectangle after valueChanged signal

I want to create a percentage display based on two rectangles.

If I test the display manually (fixed value for p_value) then the percentage bar is displayed correctly.

If I intercept a signal, the bar and the text only change when the maximum value is reached.

The intermediate values are received correctly but the display remains unchanged.

p_value = 0

p_value = 30 (set manually)

p_value = 100

QML - cp_screen is a screen manager with handled the values und signals

Rectangle {
 
    property real p_value: cp_screen.progressValue
    property real p_barwidth: Math.round(p_value * 400 / 100)   

    Rectangle { id: frame; width: 400; height: 40; color: "grey"; border.width: 1; radius: 0.2 * height
        Rectangle { id: bar  
            height: 0.8 * frame.height
            width: p_barwidth
            x: 0.1 * frame.height;  
            y: 0.1 * frame.height
            color: "white"
            radius: parent.radius
        }
        Label { 
            anchors.centerIn: parent; 
            text: p_value + " %"; 
            color: "black"; 
            font.bold: true; 
        }
    }

    Connections { 
        target: cp_screen; 
        onProgressValueChanged: { 
            console.log("PROGRESSBAR: " + p_value)
            console.log("PROGRESSBAR width: " + p_barwidth)
        } 
    }
} 

Console log

qml: PROGRESSBAR: 95
qml: PROGRESSBAR width: 380
qml: PROGRESSBAR: 96
qml: PROGRESSBAR width: 384
qml: PROGRESSBAR: 97
qml: PROGRESSBAR width: 388
qml: PROGRESSBAR: 98
qml: PROGRESSBAR width: 392
qml: PROGRESSBAR: 99
qml: PROGRESSBAR width: 396
qml: PROGRESSBAR: 100
qml: PROGRESSBAR width: 400

ScreenManager.h

Q_PROPERTY(int progressValue READ getProgressValue NOTIFY progressValueChanged)

I just wanted to improve it based on the comments.
As I said, you can use https://gist.github.com/77140ab5ef0bc219df171506ccb5a9b7.git I reproduced your example , and it has no problem. Your logical error is in other parts of your program.

Check this sample; your sample has just been completely edited and uploaded.
https://drive.google.com/file/d/1lCnIT582w3sUe3leA5zq_LHhc5bZsfX5/view?usp=sharing

I guess thats because you have x offset.
Your bar width is parent.width - 0.2 * frame.height, so your bar width should be (parent.width - 0.2 * frame.height) * p_value / 100

consider the following:

Rectangle { 
  id: bar
  anchors.verticalCenter: parent.verticalCenter
  x: parent.height / 10
  width: (parent.width - 0.2 * parent.height) * p_value / 100
  height: 0.8 * parent.height
  color: "white"
  radius: parent.radius
}

I want to make a point about Timer interval and onTriggered. The interval is a hint but, onTriggered may fire before or after that time. If you suspend and resume your application, there will be gaps on your onTriggered event. To smooth over your gaps, we should normalize based on the system clock, e.g.

    MyProgressBar {
        progress: (heartbeat.tick / 100) % 100
    }

    Timer {
        id: heartbeat
        property var tick: Date.now()
        interval: 100
        repeat: true
        running: true
        onTriggered: tick = Date.now()
    }

I have refactored your code. I used the Frame component, which can reduce the amount of pixel math needed for size and padding calculation. Here's a full working demo:

import QtQuick
import QtQuick.Controls
Page {
    id: page
    MyProgressBar {
        anchors.centerIn: parent
        progress: (heartbeat.tick / 100) % 100
    }
    Timer {
        id: heartbeat
        property var tick: Date.now()
        interval: 100
        repeat: true
        running: true
        onTriggered: tick = Date.now()
    }
}

// MyProgressBar.qml
import QtQuick
import QtQuick.Controls
Frame {
    id: progressBar
    width: 400
    height: 40
    property real progress: 50
    padding: 0
    background: Frame {
        padding: 5
        background: Rectangle {
            anchors.fill: parent
            border.color: "black"
            color: "grey"
            radius: height * 0.2
        }
        Rectangle {
            width: parent.width * (progress / 100.0)
            height: parent.height
            color: "white"
            radius: parent.height * 0.2
        }
    }
    Label { 
        anchors.centerIn: parent 
        text: (progress).toFixed(0) + " %"
        color: "black"
        font.bold: true
    } 
}

You can Try it Online!

Thanks for your feedbacks.

The onProgressValueChanged signal is recognized correctly and the value is also increased (see console) only the update of the bar or the screen seems to take place only after the last emit (I trigger the emits via a separate thread so that the gui should not blocked).

If I use a timer on the progress.qml it works as espected.

Timer {
    id: mytimer
    onTriggered: {
        p_value = p_value + 1
    }
    interval: 100
    repeat: true
    running: p_value < 100
}