A customized busy indicator in Qt Quick :

 Custom Busy Indicator 

 

A customized busy indicator in Qt Quick :

And here is the QML version.

Source Code Of Busy Indicator : 

BusyIndicator:

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.5
BusyIndicator {
    id: busyIndicator
    property real indicatorHeight: 10
    property real indicatorWidth: 10
    property real indicatorDotSize: 5
    property string indicatorColor:  "#7a73e0"
    width: indicatorHeight
    height: indicatorHeight
    running: true
    contentItem: Item {
        implicitWidth:42
        implicitHeight: 42

        Item {
            id: itemProgress
            x: parent.width / 2 - 16
            y: parent.height / 2 - 16
            width: 42
            height: 42
            opacity: busyIndicator.running ? 1 : 0


            Behavior on opacity {
                OpacityAnimator {
                    duration: 250
                }
            }

            RotationAnimator {
                target: itemProgress
                running: busyIndicator.visible && busyIndicator.running
                from: 0
                to: 360
                loops: Animation.Infinite
                duration: 1250
            }

            Repeater {
                id: repeater
                model: 3
                Rectangle {
                    x: itemProgress.width / 2 - width / 2
                    y: itemProgress.height / 2 - height / 2
                    implicitWidth: indicatorDotSize
                    implicitHeight:indicatorDotSize
                    radius: indicatorDotSize/2
                    color: "#7a73e0"
                    transform: [
                        Translate {
                            y: -Math.min(itemProgress.width, itemProgress.height) * 0.5 + 7
                        },
                        Rotation {
                            angle: index / repeater.count * 360
                            origin.x: 2.5
                            origin.y: 2.5
                        }
                    ]
                }
            }
        }
    }
}

 How to Use It :

code:

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.5
Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")


    BusyIndicator {
        anchors.centerIn: parent
    }
}