simple sample of CustomProgressbar in QML (QtQuick2)

CustomProgressBar.qml

import QtQuick 2.15

Rectangle {
    id:rootRect
    property int currentValue:0;
    property int maxValue:100;
    property int minValue:0;
    property color colorBar:"#7ec26e";
    property alias textBar: barText

    anchors.centerIn: parent
    border.width: 1
    border.color: "black"
    color: "#e3e2de"
    radius: 3
    z:1

    onCurrentValueChanged: prvObj.updateValues();
    onMaxValueChanged: prvObj.updateValues();
    onMinValueChanged: prvObj.updateValues();
    QtObject{
        id:prvObj
        property real widthPercentage: 0
        function updateValues(){
            var rawvalue = rootRect.currentValue-rootRect.minValue;
            if(rawvalue<=0) {
                widthPercentage=0;
                return;
            }
            widthPercentage= rawvalue / (maxValue-minValue);
        }
    }
    Rectangle {
        id:barRect
        x: rootRect.anchors.margins
        anchors.margins: 1
        anchors.verticalCenter: parent.verticalCenter
        color: rootRect.colorBar
        height: parent.height*0.95 - rootRect.anchors.margins*2
        width: rootRect.width * prvObj.widthPercentage - 2 - rootRect.anchors.margins*2
        z:2
        radius: 5
    }
    Text {
        id: barText
        color: "#3c5e35"
        anchors.centerIn: parent
        z:3
        text: (prvObj.widthPercentage*100) + "%";
    }
}

main.qml

import QtQuick 2.15
import QtQuick.Window 2.15

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("StackOverFlow")
    Timer {
        id: cp_screen
        property real progressValue:0;
        onTriggered: {
            if(cp_screen.progressValue>100){
                cp_screen.progressValue=0;
                return;
            }
            cp_screen.progressValue+=1;
        }
        interval: 100
        repeat: true
        running: true
    }
    CustomProgressBar {
        id:cP
        anchors.centerIn: parent;
        width: parent.width * 0.9
        anchors.margins: 10
        height:47
        maxValue: 100;
        minValue: 0;
        currentValue: cp_screen.progressValue
        textBar.text: cp_screen.progressValue + "%";
    }
}

progressBar.gif