Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

Progressbar - How can I change the content item color of an indeterminate progres bar



  • My issue is very simple. On a qml interface using the Qt Quick Controls 2.14 I have this code:

    ProgressBar
    {
        id: progressBar
        x: 250
        width: 275
        height: 4
        anchors.top: parent.top
        anchors.topMargin: 322
        anchors.horizontalCenter: parent.horizontalCenter
        indeterminate: true
        smooth: true
    
        background: Rectangle
        {
            anchors.fill: parent
            color: "#5a516e"
        }
    }
    

    Which gives this marquee progress bar:
    Progress1.png

    But I need this one:
    Progress2.png

    I spent my afternoon to find how to achieve that, without success, because no color property is available. And overriding the contentItem property seems to not provide a solution in my case, unless I want to rewrite the whole indeterminate state manually.

    So can someone explain me how to just change the color of my progress bar content?



  • I'm tired, it's late, my eyes are crusty, but try the following;

    Create a file called 'qtquickcontrols2.conf', populate it with the following text and place it directly into your project folder;

    [Controls]
    Style=Material
    
    [Universal]
    Theme=
    Accent=
    Foreground=
    Background=
    
    
    [Material]
    Theme=
    Accent=
    Variant=
    Primary=
    Foreground=
    Background=
    
    [Fusion]
    Palette\Window=
    Palette\WindowText=
    

    While in your project folder, you need to append the 'qml.qrc' file with the following line;

    <file>qtquickcontrols2.conf</file>
    

    Then, basically, you need to add only one line to your existing code, as follows;

            Material.accent: Material.Purple
    

    My complete code with the above line added into the code;

    import QtQuick 2.12
    import QtQuick.Window 2.12
    import QtQuick.Controls 2.12
    import QtQuick.Controls.Material 2.12
    
    Window {
        visible: true
        width: 640; height: 480
        color: "grey"
        title: qsTr("Colour progress bar")
    
        ProgressBar {
            id: progressBar
            x: 250; width: 475; height: 44
            anchors {
                top: parent.top
                topMargin: 322
                horizontalCenter: parent.horizontalCenter
            }
            indeterminate: true; smooth: true
    
            Material.accent: Material.Purple
    
            background: Rectangle {
                color: "black"
                radius: 3
            }
        }
    }
    
    

    purple-progress-bar.JPG



  • Try setting the palette.dark color (https://doc.qt.io/qt-5/qml-palette.html).



  • I'm tired, it's late, my eyes are crusty, but try the following;

    Create a file called 'qtquickcontrols2.conf', populate it with the following text and place it directly into your project folder;

    [Controls]
    Style=Material
    
    [Universal]
    Theme=
    Accent=
    Foreground=
    Background=
    
    
    [Material]
    Theme=
    Accent=
    Variant=
    Primary=
    Foreground=
    Background=
    
    [Fusion]
    Palette\Window=
    Palette\WindowText=
    

    While in your project folder, you need to append the 'qml.qrc' file with the following line;

    <file>qtquickcontrols2.conf</file>
    

    Then, basically, you need to add only one line to your existing code, as follows;

            Material.accent: Material.Purple
    

    My complete code with the above line added into the code;

    import QtQuick 2.12
    import QtQuick.Window 2.12
    import QtQuick.Controls 2.12
    import QtQuick.Controls.Material 2.12
    
    Window {
        visible: true
        width: 640; height: 480
        color: "grey"
        title: qsTr("Colour progress bar")
    
        ProgressBar {
            id: progressBar
            x: 250; width: 475; height: 44
            anchors {
                top: parent.top
                topMargin: 322
                horizontalCenter: parent.horizontalCenter
            }
            indeterminate: true; smooth: true
    
            Material.accent: Material.Purple
    
            background: Rectangle {
                color: "black"
                radius: 3
            }
        }
    }
    
    

    purple-progress-bar.JPG



  • @Jkimmy said in Progressbar - How can I change the content item color of an indeterminate progres bar:

    Try setting the palette.dark color (https://doc.qt.io/qt-5/qml-palette.html).

    I just tried to do that, unfortunately it doesn't work, or I didn't understood how to achieve that. The ProgressBar component contains effectively a palette property, but trying to change the palette.dark property causes a "this property does not exists" error.

    I also tried to write a .conf file and to change the color value, but nothing happened.

    Can you please explain how I may change this color?



  • @Markkyboy Thank you very much, it works!





  • import QtQuick 2.14
    import QtQuick.Controls 2.14
    
    ApplicationWindow {
        visible: true
    
        ProgressBar {
            indeterminate: true
            palette.dark: "blue"
            anchors.centerIn: parent
        }
    }
    

    You tried this? It works for me... Weird.



  • @Jkimmy said in Progressbar - How can I change the content item color of an indeterminate progres bar:

    import QtQuick 2.14
    import QtQuick.Controls 2.14

    ApplicationWindow {
    visible: true

    ProgressBar {
        indeterminate: true
        palette.dark: "blue"
        anchors.centerIn: parent
    }
    

    }

    huh, this works for me too and is a much simpler approach than mine. Although, I notice 'palette' is underlined with a warning saying "palette" does not have members. (M17) but the code compiles anyway! +1

    I am now able to set my import statements to versions 2.14 but previously I got an error and would set them back to versions 2.12. I also note that I usually use 'Window' not 'ApplicationWindow', maybe that is the difference?, but how to get rid of the ' "palette" does not have members(M17) ' warning would be nice.

    Ah, looks like I have answered my own query, see here regarding 'palette' and 'ApplicationWindow'; https://doc.qt.io/qt-5/qml-qtquick-controls2-control.html#palette-prop



  • For info I found also another alternative:

    ...
    import QtQuick.Controls 2.12
    import QtQuick.Controls.Material.impl 2.12
    ...
    
    ProgressBar
    {
        ...
        id: pbProgress
    
        contentItem: ProgressBarImpl
        {
            implicitHeight: pbProgress.height
            anchors.fill: parent
            anchors.margins: 0
            scale: pbProgress.mirrored ? -1 : 1
            progress: pbProgress.position
            indeterminate: pbProgress.visible && pbProgress.indeterminate
            color: "#5014ad"
        }
        ...
    }