Help with making circular activity indicator

[RadiumBall]

Hi Can you please help me in making a circular activity like here

here is some code we tried, but we did not get a uniform activity indicator, any ideas?

Item{​​​​​​​​

id:control

implicitWidth:44

implicitHeight:44

propertyrealstartAngle:0

propertyrealspanAngle:360

propertyintdialWidth:4

propertycolorbackgroundColor:"transparent"

propertycolordialColor:"#ECECF0"

propertycolorprogressColor:"#51BDDF"

propertyintpenStyle:Qt.FlatCap

Rectangle{​​​​​​​​

id:outer

height:44

width:44

radius:width/2

border.color:dialColor

border.width:dialWidth


Shape{​​​​​​​​


id:shape

anchors.fill:parent

ShapePath{​​​​​​​​

id:pathProgress

strokeColor:control.progressColor

fillColor:"transparent"

strokeWidth:control.dialWidth

capStyle:control.penStyle



PathAngleArc{​​​​​​​​

id:test

radiusX:20

radiusY:20

centerX:control.width/2

centerY:control.height/2

startAngle:-90

sweepAngle:0

}​​​​​​​​

}​​​​​​​​

SequentialAnimation{​​​​​​​​

running:true

loops:Animation.Infinite

RotationAnimation{​​​​​​​​target:shape;from:0;to:180;duration:500}​​​​​​​​

PropertyAction{​​​​​​​​target:control;property:"progressColor";value:"#B3DEEB"}​​​​​​​​

RotationAnimation{​​​​​​​​target:shape;from:180;to:360;duration:500}​​​​​​​​

PropertyAction{​​​​​​​​target:control;property:"progressColor";value:"#51BDDF"}​​​​​​​​



}​​​​​​​​

onRotationChanged:{​​​​​​​​

test.sweepAngle=shape.rotation;

}​​​​​​​​

}​​​​​​​​

}​​​​​​​​

}​​​​​​​​

[J.Hilk]

@RadiumBall are you sure, you don‘t want to just use the premade busy indicator ?
https://doc.qt.io/qt-5/qml-qtquick-controls2-busyindicator.html

it can be customized too!