Important: Please read the Qt Code of Conduct -

Custom progress bar [ Involves both horizontal and vertical movement]

  • Hi All,
    I have been working to bring a new design progress bar for my project . I have a sketch in my hand but am finding it difficult to implement. Please provide any input for how to proceed!
    I have attached a rough image on how I want the progress to be shown : progress bar design
    alt text

    I have limited knowledge in qml and I am asking in the light of a previous project I have done which was a volume bar in which the progress was shown by adjusting the height of an image and using number animation to make it smooth.

    I used an Item class for a window inside which I placed an image and changed it height according to the input value. But such a possibility exists only for a vertical or horizontal progress . If I try to attempt it in this case, the revealing comes out like this:
    alt text

    If such a design is to be implemented using qml, what could be the approaches I could follow? Is there a way in which I can reveal a complete image in parts like I had explained before for the volume bar or should I use the Qpainter() ?

  • Qt Champions 2018

    If you want to do that in QML, look at the new Shape module in Qt 5.10, or do it with Canvas.

  • @hkay hello,

    I did this simple exemple (QML/JS),i hope It can give you ideas.


    import QtQuick 2.0
    Item {
        property int val:1
        property int maxValue:50
        property int minValue:0
        Timer{// test timer
            interval: 200
            running: true
            repeat: running
            property bool up: true
            onTriggered: {
                    if(val==minValue) up = true
        function colorVal(val, ind)   // instead of returning colors you can return image path like "images/01.png"
            if(val === 0) return "gray"
            var temp = maxValue-3
            if(ind <= temp)
                if(ind < temp - 3 )return "green"
                else return "orange"
            else return "red"
        function widthVal(val, ind)
            if(val === 0) return 35
            var temp = maxValue - 3
            if(ind <= temp)
                if(ind < temp-3 )return 35
                else return 75
            else return 155
            //anchors.fill: parent
            spacing: 1
                model : val
                anchors.right: parent.right
                Rectangle{ // here you can put an Image instead of Rectangle, and set 'source :  function imgageVal(val, ind) '
                    height: color=="red" ? 3 : 5
                    width: widthVal(val,index)
                    color: colorVal(val,index)


Log in to reply