RibbonBusyBar,RibbonBusyRing,RibbonProgressBar,RibbonProgressRing: Fix wrong spelling.

example/qml/Qt5/components/TabBar.qml

@@ -612,6 +612,43 @@ RibbonTabBar {
             }
         }
     }
+    RibbonTabPage{
+        title: qsTr("Indicator")
+        RibbonTabGroup{
+            text: qsTr("BusyRing")
+            width: busyring_layout.width + 30
+            RowLayout{
+                id: busyring_layout
+                anchors.centerIn: parent
+                height: parent.height
+                RibbonBusyRing{
+                    running: true
+                }
+                RibbonBusyRing{
+                    running: true
+                    clockwise: false
+                }
+            }
+        }
+        RibbonTabGroup{
+            text: qsTr("BusyBar")
+            width: busybar_layout.width + 30
+            ColumnLayout{
+                id: busybar_layout
+                anchors.centerIn: parent
+                height: parent.height
+                RibbonBusyBar{
+                    running: true
+                    barWidth: 100
+                }
+                RibbonBusyBar{
+                    running: true
+                    reversed: true
+                    barWidth: 100
+                }
+            }
+        }
+    }
     RibbonTabPage{
         title: qsTr("Views")
         RibbonTabGroup{

example/qml/Qt6/components/TabBar.qml

@@ -612,6 +612,43 @@ RibbonTabBar {
             }
         }
     }
+    RibbonTabPage{
+        title: qsTr("Indicator")
+        RibbonTabGroup{
+            text: qsTr("BusyRing")
+            width: busyring_layout.width + 30
+            RowLayout{
+                id: busyring_layout
+                anchors.centerIn: parent
+                height: parent.height
+                RibbonBusyRing{
+                    running: true
+                }
+                RibbonBusyRing{
+                    running: true
+                    clockwise: false
+                }
+            }
+        }
+        RibbonTabGroup{
+            text: qsTr("BusyBar")
+            width: busybar_layout.width + 30
+            ColumnLayout{
+                id: busybar_layout
+                anchors.centerIn: parent
+                height: parent.height
+                RibbonBusyBar{
+                    running: true
+                    barWidth: 100
+                }
+                RibbonBusyBar{
+                    running: true
+                    reversed: true
+                    barWidth: 100
+                }
+            }
+        }
+    }
     RibbonTabPage{
         title: qsTr("Views")
         RibbonTabGroup{

lib_source/CMakeLists.txt

@@ -40,7 +40,8 @@ set(qml_files RibbonTabBar.qml RibbonTabButton.qml RibbonView.qml
     RibbonMessageListView.qml RibbonTour.qml RibbonTourContent.qml
     RibbonBackStageView.qml RibbonBackStagePage.qml RibbonBackStageGroup.qml
     RibbonRadioButton.qml RibbonBackStageMenuItem.qml RibbonTourItem.qml
-    RibbonObject.qml RibbonProgressBar.qml RibbonProgressRing.qml)
+    RibbonObject.qml RibbonProgressBar.qml RibbonProgressRing.qml
+    RibbonBusyBar.qml RibbonBusyRing.qml)
 
 set(qml_prefix "qml/Qt${QT_VERSION_MAJOR}/")
 

lib_source/qml/Qt5/RibbonBusyBar.qml

@@ -0,0 +1,101 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtGraphicalEffects 1.0
+import RibbonUI 1.0
+
+BusyIndicator {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding)
+
+    padding: 2
+    property real barWidth: 200
+    property real barHeight: 4
+    property real indicatorWidth: 4
+    property real indicatorHeight: 4
+    property int indicatorNumber: 5
+    property int animationDuration: 2000
+    property bool reversed: false
+
+    QtObject{
+        id: private_property
+    }
+
+    contentItem: Item {
+        id: item
+        implicitWidth: barWidth
+        implicitHeight: barHeight
+        clip: true
+        layer.enabled: true
+        layer.effect: OpacityMask {
+            maskSource: Rectangle{
+                implicitWidth: item.width
+                implicitHeight: item.height
+                radius: item.height / 2
+            }
+        }
+        Repeater {
+            id: repeater
+            anchors.centerIn: parent
+            model: indicatorNumber
+            delegate: Rectangle {
+                width: indicatorWidth
+                height: indicatorHeight
+                color: RibbonTheme.isDarkMode ? "white" : "black"
+                x: -(index + 1) * indicatorWidth
+                y: (barHeight.height / 2 - height / 2)
+                radius: Math.min(width,height)/2
+                opacity: 0.5
+                SequentialAnimation {
+                    loops: Animation.Infinite
+                    running: control.running
+
+                    PropertyAnimation {
+                        target: repeater.itemAt(index)
+                        property: "opacity"
+                        from: 0
+                        to: 0.5
+                        duration: 50 * index
+                        easing.type: Easing.OutExpo
+                    }
+
+                    NumberAnimation {
+                        target: repeater.itemAt(index)
+                        property: "x"
+                        from: control.reversed ? barWidth + (index + 1) * indicatorWidth : -(index + 1) * indicatorWidth
+                        to: control.reversed ? (index + 1) * indicatorWidth : barWidth - (index + 1) * indicatorWidth
+                        duration: animationDuration * 9 / 10
+                        easing.type: Easing.OutInCubic
+                    }
+
+                    ParallelAnimation{
+                        NumberAnimation {
+                            target: repeater.itemAt(index)
+                            property: "x"
+                            from: control.reversed ? (index + 1) * indicatorWidth : barWidth - (index + 1) * indicatorWidth
+                            to: control.reversed ? -(index + 1) * indicatorWidth - control.indicatorNumber*indicatorWidth : barWidth + (index + 1) * indicatorWidth + control.indicatorNumber*indicatorWidth
+                            duration: animationDuration / 10
+                            easing.type: Easing.OutInCubic
+                        }
+
+                        PropertyAnimation {
+                            target: repeater.itemAt(index)
+                            property: "opacity"
+                            from: 0.5
+                            to: 0
+                            duration: animationDuration / 10
+                            easing.type: Easing.OutExpo
+                        }
+                    }
+
+                    PauseAnimation {
+                        duration: 50 * (control.indicatorNumber - index - 1)
+                    }
+                }
+            }
+        }
+    }
+}

lib_source/qml/Qt5/RibbonBusyRing.qml

@@ -0,0 +1,115 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import RibbonUI 1.0
+
+BusyIndicator {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding)
+
+    padding: 6
+    property real ringWidth: RibbonTheme.modernStyle ? radiusWidth : radiusLength * 7 / 12
+    property real radiusLength: 15
+    property real radiusWidth: 4
+    property int lineNumber: RibbonTheme.modernStyle ? 10 : 8
+    property real default_saturation: 0
+    property int animationDuration: RibbonTheme.modernStyle ? 4000 : 1000
+    property bool clockwise: true
+
+    onAnimationDurationChanged: {
+        running = !running
+        Qt.callLater(()=>running = !running) // Fix Qt 5 animation duration doesn't change
+    }
+
+    QtObject{
+        id: private_property
+        property real angle: 360 / lineNumber
+        property real saturation: (1 - default_saturation) / lineNumber
+    }
+
+    contentItem: Item {
+        id: item
+        implicitWidth: radiusLength * 2
+        implicitHeight: radiusLength * 2
+        property real dynamic_index: 0
+
+        PropertyAnimation on dynamic_index {
+            running: control.running && !RibbonTheme.modernStyle
+            from: clockwise ? lineNumber : 0
+            to: clockwise ? 0 : lineNumber
+            loops: Animation.Infinite
+            duration: animationDuration
+        }
+
+        Repeater {
+            id: repeater
+            anchors.centerIn: parent
+            model: RibbonTheme.modernStyle ? lineNumber / 2 : lineNumber
+            delegate: Rectangle {
+                width: radiusWidth
+                height: ringWidth
+                property real item_saturation: (index + item.dynamic_index) % lineNumber * private_property.saturation + default_saturation
+                color: Qt.hsla(0, 0, RibbonTheme.modernStyle ? RibbonTheme.isDarkMode ? 1 : 0 : item_saturation, 1)
+                rotation: index * private_property.angle
+                x: (parent.width / 2) - (radiusLength - ringWidth) * Math.sin(rotation/180 * Math.PI)
+                y: (parent.height / 2 - height / 2) + (radiusLength - ringWidth) * Math.cos(rotation/180 * Math.PI)
+                transformOrigin: Item.Top
+                radius: Math.min(width,height)/2
+                opacity: RibbonTheme.modernStyle ? 0 : 0.5
+                SequentialAnimation {
+                    loops: Animation.Infinite
+                    running: control.running && RibbonTheme.modernStyle
+
+                    PropertyAnimation {
+                        target: repeater.itemAt(index)
+                        property: "opacity"
+                        from: 0
+                        to: 0.5
+                        duration: 50 * index
+                        easing.type: Easing.OutExpo
+                    }
+
+                    NumberAnimation {
+                        target: repeater.itemAt(index)
+                        property: "rotation"
+                        from: (clockwise ? 1 : -1) * 0
+                        to: (clockwise ? 1 : -1) * (360 - (index - lineNumber / 4 + 0.5) * private_property.angle * 1.4)
+                        duration: animationDuration / 2
+                        easing.type: Easing.OutInQuad
+                    }
+
+                    ParallelAnimation{
+                        NumberAnimation {
+                            target: repeater.itemAt(index)
+                            property: "rotation"
+                            from: (clockwise ? 1 : -1) * (360 - (index - lineNumber / 4 + 0.5) * private_property.angle * 1.4)
+                            to: (clockwise ? 1 : -1) * 720
+                            duration: animationDuration / 2
+                            easing.type: Easing.OutInQuad
+                        }
+                        SequentialAnimation{
+                            PauseAnimation {
+                                duration: animationDuration / 2 - animationDuration / 20
+                            }
+                            PropertyAnimation {
+                                target: repeater.itemAt(index)
+                                property: "opacity"
+                                from: 0.5
+                                to: 0
+                                duration: animationDuration / 20
+                                easing.type: Easing.OutExpo
+                            }
+                        }
+                    }
+
+                    PauseAnimation {
+                        duration: 50 * (control.lineNumber - index - 1)
+                    }
+                }
+            }
+        }
+    }
+}

lib_source/qml/Qt5/RibbonProgressBar.qml

@@ -22,7 +22,7 @@ Item{
     property int barHeight: 6
     property bool showText: true
     property int textLabelMargin: textLabelPosition === RibbonProgressBar.LabelPosition.Top || textLabelPosition === RibbonProgressBar.LabelPosition.Bottom ? 0 : 5
-    property int animationDurarion: 800
+    property int animationDuration: 800
     property int indeterminateWidth: barWidth * 0.25
     property int textLabelPosition: bar.mirrored ? RibbonProgressBar.LabelPosition.Left : RibbonProgressBar.LabelPosition.Right
     property string text: qsTr("Loading")
@@ -86,7 +86,7 @@ Item{
                     from: -indeterminateWidth
                     to:barWidth+indeterminateWidth
                     loops: Animation.Infinite
-                    duration: animationDurarion
+                    duration: animationDuration
                     easing.type: Easing.OutInQuad
                 }
             }

lib_source/qml/Qt5/RibbonProgressRing.qml

@@ -5,7 +5,7 @@ RibbonProgressBar {
     id: control
     barWidth: centerInTextLabel && showText ? Math.max(textLabel.contentWidth + ringWidth * 2 + textLabelMargin * 2, 50) : 50
     barHeight: barWidth
-    animationDurarion: 2000
+    animationDuration: 2000
     property real ringWidth: 6
     property bool centerInTextLabel: false
 
@@ -49,14 +49,14 @@ RibbonProgressBar {
         SequentialAnimation on startAngle {
             loops: Animation.Infinite
             running: control.visible && control.indeterminate
-            PropertyAnimation { from: 0; to: 450; duration: control.animationDurarion/2; easing.type: Easing.OutSine }
+            PropertyAnimation { from: 0; to: 450; duration: control.animationDuration/2; easing.type: Easing.OutSine }
-            PropertyAnimation { from: 450; to: 1080; duration: control.animationDurarion/2; easing.type: Easing.OutSine }
+            PropertyAnimation { from: 450; to: 1080; duration: control.animationDuration/2; easing.type: Easing.OutSine }
         }
         SequentialAnimation on sweepAngle {
             loops: Animation.Infinite
             running: control.visible && control.indeterminate
-            PropertyAnimation { from: 0; to: 180; duration: control.animationDurarion/2; easing.type: Easing.OutSine }
+            PropertyAnimation { from: 0; to: 180; duration: control.animationDuration/2; easing.type: Easing.OutSine }
-            PropertyAnimation { from: 180; to: 0; duration: control.animationDurarion/2; easing.type: Easing.OutSine }
+            PropertyAnimation { from: 180; to: 0; duration: control.animationDuration/2; easing.type: Easing.OutSine }
         }
         onStartAngleChanged: {
             requestPaint()

lib_source/qml/Qt6/RibbonBusyBar.qml

@@ -0,0 +1,101 @@
+import QtQuick
+import QtQuick.Controls
+import Qt5Compat.GraphicalEffects
+import RibbonUI
+
+BusyIndicator {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding)
+
+    padding: 2
+    property real barWidth: 200
+    property real barHeight: 4
+    property real indicatorWidth: 4
+    property real indicatorHeight: 4
+    property int indicatorNumber: 5
+    property int animationDuration: 2000
+    property bool reversed: false
+
+    QtObject{
+        id: private_property
+    }
+
+    contentItem: Item {
+        id: item
+        implicitWidth: barWidth
+        implicitHeight: barHeight
+        clip: true
+        layer.enabled: true
+        layer.effect: OpacityMask {
+            maskSource: Rectangle{
+                implicitWidth: item.width
+                implicitHeight: item.height
+                radius: item.height / 2
+            }
+        }
+        Repeater {
+            id: repeater
+            anchors.centerIn: parent
+            model: indicatorNumber
+            delegate: Rectangle {
+                width: indicatorWidth
+                height: indicatorHeight
+                color: RibbonTheme.isDarkMode ? "white" : "black"
+                x: -(index + 1) * indicatorWidth
+                y: (barHeight.height / 2 - height / 2)
+                radius: Math.min(width,height)/2
+                opacity: 0.5
+                SequentialAnimation {
+                    loops: Animation.Infinite
+                    running: control.running
+
+                    PropertyAnimation {
+                        target: repeater.itemAt(index)
+                        property: "opacity"
+                        from: 0
+                        to: 0.5
+                        duration: 50 * index
+                        easing.type: Easing.OutExpo
+                    }
+
+                    NumberAnimation {
+                        target: repeater.itemAt(index)
+                        property: "x"
+                        from: control.reversed ? barWidth + (index + 1) * indicatorWidth : -(index + 1) * indicatorWidth
+                        to: control.reversed ? (index + 1) * indicatorWidth : barWidth - (index + 1) * indicatorWidth
+                        duration: animationDuration * 9 / 10
+                        easing.type: Easing.OutInCubic
+                    }
+
+                    ParallelAnimation{
+                        NumberAnimation {
+                            target: repeater.itemAt(index)
+                            property: "x"
+                            from: control.reversed ? (index + 1) * indicatorWidth : barWidth - (index + 1) * indicatorWidth
+                            to: control.reversed ? -(index + 1) * indicatorWidth - control.indicatorNumber*indicatorWidth : barWidth + (index + 1) * indicatorWidth + control.indicatorNumber*indicatorWidth
+                            duration: animationDuration / 10
+                            easing.type: Easing.OutInCubic
+                        }
+
+                        PropertyAnimation {
+                            target: repeater.itemAt(index)
+                            property: "opacity"
+                            from: 0.5
+                            to: 0
+                            duration: animationDuration / 10
+                            easing.type: Easing.OutExpo
+                        }
+                    }
+
+                    PauseAnimation {
+                        duration: 50 * (control.indicatorNumber - index - 1)
+                    }
+                }
+            }
+        }
+    }
+}

lib_source/qml/Qt6/RibbonBusyRing.qml

@@ -0,0 +1,115 @@
+import QtQuick
+import QtQuick.Controls
+import RibbonUI
+
+BusyIndicator {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding)
+
+    padding: 6
+    property real ringWidth: RibbonTheme.modernStyle ? radiusWidth : radiusLength * 7 / 12
+    property real radiusLength: 15
+    property real radiusWidth: 4
+    property int lineNumber: RibbonTheme.modernStyle ? 10 : 8
+    property real default_saturation: 0
+    property int animationDuration: RibbonTheme.modernStyle ? 4000 : 1000
+    property bool clockwise: true
+
+    onAnimationDurationChanged: {
+        running = !running
+        Qt.callLater(()=>running = !running) // Fix Qt 5 animation duration doesn't change
+    }
+
+    QtObject{
+        id: private_property
+        property real angle: 360 / lineNumber
+        property real saturation: (1 - default_saturation) / lineNumber
+    }
+
+    contentItem: Item {
+        id: item
+        implicitWidth: radiusLength * 2
+        implicitHeight: radiusLength * 2
+        property real dynamic_index: 0
+
+        PropertyAnimation on dynamic_index {
+            running: control.running && !RibbonTheme.modernStyle
+            from: clockwise ? lineNumber : 0
+            to: clockwise ? 0 : lineNumber
+            loops: Animation.Infinite
+            duration: animationDuration
+        }
+
+        Repeater {
+            id: repeater
+            anchors.centerIn: parent
+            model: RibbonTheme.modernStyle ? lineNumber / 2 : lineNumber
+            delegate: Rectangle {
+                width: radiusWidth
+                height: ringWidth
+                property real item_saturation: (index + item.dynamic_index) % lineNumber * private_property.saturation + default_saturation
+                color: Qt.hsla(0, 0, RibbonTheme.modernStyle ? RibbonTheme.isDarkMode ? 1 : 0 : item_saturation, 1)
+                rotation: index * private_property.angle
+                x: (parent.width / 2) - (radiusLength - ringWidth) * Math.sin(rotation/180 * Math.PI)
+                y: (parent.height / 2 - height / 2) + (radiusLength - ringWidth) * Math.cos(rotation/180 * Math.PI)
+                transformOrigin: Item.Top
+                radius: Math.min(width,height)/2
+                opacity: RibbonTheme.modernStyle ? 0 : 0.5
+                SequentialAnimation {
+                    loops: Animation.Infinite
+                    running: control.running && RibbonTheme.modernStyle
+
+                    PropertyAnimation {
+                        target: repeater.itemAt(index)
+                        property: "opacity"
+                        from: 0
+                        to: 0.5
+                        duration: 50 * index
+                        easing.type: Easing.OutExpo
+                    }
+
+                    NumberAnimation {
+                        target: repeater.itemAt(index)
+                        property: "rotation"
+                        from: (clockwise ? 1 : -1) * 0
+                        to: (clockwise ? 1 : -1) * (360 - (index - lineNumber / 4 + 0.5) * private_property.angle * 1.4)
+                        duration: animationDuration / 2
+                        easing.type: Easing.OutInQuad
+                    }
+
+                    ParallelAnimation{
+                        NumberAnimation {
+                            target: repeater.itemAt(index)
+                            property: "rotation"
+                            from: (clockwise ? 1 : -1) * (360 - (index - lineNumber / 4 + 0.5) * private_property.angle * 1.4)
+                            to: (clockwise ? 1 : -1) * 720
+                            duration: animationDuration / 2
+                            easing.type: Easing.OutInQuad
+                        }
+                        SequentialAnimation{
+                            PauseAnimation {
+                                duration: animationDuration / 2 - animationDuration / 20
+                            }
+                            PropertyAnimation {
+                                target: repeater.itemAt(index)
+                                property: "opacity"
+                                from: 0.5
+                                to: 0
+                                duration: animationDuration / 20
+                                easing.type: Easing.OutExpo
+                            }
+                        }
+                    }
+
+                    PauseAnimation {
+                        duration: 50 * (control.lineNumber - index - 1)
+                    }
+                }
+            }
+        }
+    }
+}

lib_source/qml/Qt6/RibbonProgressBar.qml

@@ -22,7 +22,7 @@ Item{
     property int barHeight: 6
     property bool showText: true
     property int textLabelMargin: textLabelPosition === RibbonProgressBar.LabelPosition.Top || textLabelPosition === RibbonProgressBar.LabelPosition.Bottom ? 0 : 5
-    property int animationDurarion: 800
+    property int animationDuration: 800
     property int indeterminateWidth: barWidth * 0.25
     property int textLabelPosition: bar.mirrored ? RibbonProgressBar.LabelPosition.Left : RibbonProgressBar.LabelPosition.Right
     property string text: qsTr("Loading")
@@ -86,7 +86,7 @@ Item{
                     from: -indeterminateWidth
                     to:barWidth+indeterminateWidth
                     loops: Animation.Infinite
-                    duration: animationDurarion
+                    duration: animationDuration
                     easing.type: Easing.OutInQuad
                 }
             }

lib_source/qml/Qt6/RibbonProgressRing.qml

@@ -5,7 +5,7 @@ RibbonProgressBar {
     id: control
     barWidth: centerInTextLabel && showText ? Math.max(textLabel.contentWidth + ringWidth * 2 + textLabelMargin * 2, 50) : 50
     barHeight: barWidth
-    animationDurarion: 2000
+    animationDuration: 2000
     property real ringWidth: 6
     property bool centerInTextLabel: false
 
@@ -49,14 +49,14 @@ RibbonProgressBar {
         SequentialAnimation on startAngle {
             loops: Animation.Infinite
             running: control.visible && control.indeterminate
-            PropertyAnimation { from: 0; to: 450; duration: control.animationDurarion/2; easing.type: Easing.OutSine }
+            PropertyAnimation { from: 0; to: 450; duration: control.animationDuration/2; easing.type: Easing.OutSine }
-            PropertyAnimation { from: 450; to: 1080; duration: control.animationDurarion/2; easing.type: Easing.OutSine }
+            PropertyAnimation { from: 450; to: 1080; duration: control.animationDuration/2; easing.type: Easing.OutSine }
         }
         SequentialAnimation on sweepAngle {
             loops: Animation.Infinite
             running: control.visible && control.indeterminate
-            PropertyAnimation { from: 0; to: 180; duration: control.animationDurarion/2; easing.type: Easing.OutSine }
+            PropertyAnimation { from: 0; to: 180; duration: control.animationDuration/2; easing.type: Easing.OutSine }
-            PropertyAnimation { from: 180; to: 0; duration: control.animationDurarion/2; easing.type: Easing.OutSine }
+            PropertyAnimation { from: 180; to: 0; duration: control.animationDuration/2; easing.type: Easing.OutSine }
         }
         onStartAngleChanged: {
             requestPaint()