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

Change color to BusyIndicator



  • Hi,

    I search on the net but I didn't find something usefull for this.
    I have a simple BusyIndicator that I show in my c++ application, I just want to change the color from black (default) to blue. How can I do this?
    this is my code:
    BusyIndicator.qml

    import QtQuick 2.6
    import QtQuick.Controls 1.3
    import QtQuick.Window 2.2
    import QtQuick.Controls.Styles 1.4
    
    Rectangle {
            width: 50
            height: 50
            visible: true
    
            BusyIndicator {
               id: busyIndication
               anchors.centerIn: parent
               // 'running' defaults to 'true'
            }
    }
    

    Thanks in advance for your help!





  • Hi and thanks for the answer.
    I've already tried that solution, but it gives me this error:

    qrc:/rec/BusyProva.qml:18:9: Type BusyIndicator unavailable
    qrc://busyindicator.qml: No such file or directory
    

    My qml file is called BusyProva.qml so I don't know what it's trying to do with the second error.

    this is the complete code:

        QQuickView *rotella = new QQuickView();
        rotella->setResizeMode(QQuickView::SizeRootObjectToView);
        QWidget *container = QWidget::createWindowContainer(rotella, this);
        container->setFocusPolicy(Qt::TabFocus);
        rotella->setSource(QUrl("qrc:/rec/BusyProva.qml"));
        container->setGeometry(this->width()/2 - 25, this->height()/2 - 25, 50, 50);
        rotella->show();
    

    BusyProva.qml

    import QtQuick 2.6
    import QtQuick.Controls 2.1
    
    Rectangle {
            BusyIndicator {
                id: control
    
                contentItem: Item {
                    implicitWidth: 64
                    implicitHeight: 64
    
                    Item {
                        id: item
                        x: parent.width / 2 - 32
                        y: parent.height / 2 - 32
                        width: 64
                        height: 64
                        opacity: control.running ? 1 : 0
    
                        Behavior on opacity {
                            OpacityAnimator {
                                duration: 250
                            }
                        }
    
                        RotationAnimator {
                            target: item
                            running: control.visible && control.running
                            from: 0
                            to: 360
                            loops: Animation.Infinite
                            duration: 1250
                        }
    
                        Repeater {
                            id: repeater
                            model: 6
    
                            Rectangle {
                                x: item.width / 2 - width / 2
                                y: item.height / 2 - height / 2
                                implicitWidth: 10
                                implicitHeight: 10
                                radius: 5
                                color: "#21be2b"
                                transform: [
                                    Translate {
                                        y: -Math.min(item.width, item.height) * 0.5 + 5
                                    },
                                    Rotation {
                                        angle: index / repeater.count * 360
                                        origin.x: 5
                                        origin.y: 5
                                    }
                                ]
                            }
                        }
                    }
                }
            }
    }
    

    Can you help me on this?



  • After some other tests it looks like this problem is only given when the QtQuickControls is 2.0 or more.
    For QtQuickControls 1.4 it does not give any problem but I have to use a different code:

    import QtQuick 2.6
    import QtQuick.Controls 1.4
    Rectangle {
            width: 50
            height: 50
            visible: true
    
            BusyIndicator {
               id: busyIndication
               anchors.centerIn: parent
    
               // 'running' defaults to 'true'
            }
    }
    

    Because the property contentItem is not found using QtQuick.Controls 1.4
    But the porblem of this code is that I can't change the color of the busyIndicator.



  • This post is pretty old. However, there is another way, easier, to change the color of the BusyIndicator. If you combine a Busy Indicator with ColorOverlay, you will have the desired result.

    Good luck.



  • i have an easier and better solution for this :

    import QtQuick 2.12
    import QtQuick.Controls 2.12
    import QtQuick.Controls.Universal 2.12
    BusyIndicator {
        id: busyIndicator
        //x: 290
        //y: 330
        implicitWidth: 75
        implicitHeight: 75
        visible: running
        running: true
        anchors.horizontalCenter: parent.horizontalCenter
        Universal.accent: Universal.Orange //here you can set color
    }
    


  • @haftado3 Hi. That solution is easier, but with limited colors. What about the black, for example?



  • @oria66 Universal.Orange is just predefined color but you can use any color. But I guess it will no longer work if you change style to Material for example.

    From Qt Doc: Note: Even though the accent can be any color, it is recommended to use one of the pre-defined Universal colors that have been designed to work well with the rest of the Universal style palette.



  • @Gojir4. Thanks for the anotation!



  • @oria66 you can set any :

    Universal.accent: "yellow"
    


  • @oria66 if you want to change to black style :

    Universal.theme = Universal.Dark
    

    or if you only want black color :

    Universal.accent:"black"
    


  • Hi.
    With fullscreen EGLFS applications without a desktop environment the Universal themes don't seem to work.

    What works to change the color of the BusyIndicator though is to change its palette.dark property to the color you want.

    BusyIndicator {
        ...
       palette.dark: "blue"
       ...
    }
    


  • Hi,
    I know I'm opening an old question but it is not working for me:
    BusyIndicator {
    x: stageRec.width/2 -width + 30
    y: 300
    running: backend.checkupReadyState?false : true
    Universal.accent: Universal.Orange
    }
    this is my code and my color isn't changing. anyone know why?


  • Moderators

    @Talya HI and welcome,

    take look at the documentation, the section about customizing the busy indicator:

    https://doc.qt.io/qt-5/qtquickcontrols2-customize.html#customizing-busyindicator



  • Thank you very!


Log in to reply