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"
    

Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.