Changing indeterminate ProgressBar indicator color

HenrytheEighth

I'm trying to write a splash screen for the KDE environment but I'm having trouble changing the color of the progressBar indicator for indeterminate mode.

My current implementation:

import QtQuick 2.5 
import QtQuick.Controls 2.4 

Rectangle {
    id: background
    anchors.fill: parent
    color: "lightgrey"
    anchors.centerIn: parent 
    
    Image {
        id: logo 
        anchors.centerIn: parent
        source: "../previews/gentoo-signet.svg" 
        sourceSize.width: 400
        sourceSize.height: 400
    }
    
    ProgressBar {
        id: startProg 
        anchors.horizontalCenter: background.horizontalCenter
        anchors.top: logo.bottom 
        anchors.topMargin: 50 
        indeterminate: true 
        width: 400
        height: 4 

/*
        background: Rectangle {
            implicitWidth: parent.width
            implicitHeight: parent.height
            color: '#ffffff'
            radius: 3 
        }
 
        
        contentItem: Item {
            width: 400 
            implicitHeight: 4 
            
            Rectangle {  
                id: marker  
                color: "#4e4371"
                height: parent.height
                width: parent.width * control.visualPosition  
                radius: 2 
            } 
        }
*/    
    }
}

With the code commented out, the above properly displays an indeterminate progress bar with the black dash indicators. If I uncomment out the section, I get a white rectangle of the proper size, but no progress indicator.

Any ideas on how I can change the color of the indicator from black to purple (e.g. #4e4371).

Thanks!

krokstr

I am looking for the solution of that problem too. Anyone?

krokstr

Solution found, just add next line to your existing code of ProgressBar.

Material.accent: Material.Teal

ProgressBar {
        id: startProg 
        anchors.horizontalCenter: background.horizontalCenter
        anchors.top: logo.bottom 
        anchors.topMargin: 50 
        indeterminate: true 
        width: 400
        height: 4 

        Material.accent: Material.Teal
}

This will change the default Pink to Teal or any colour you like!