Help with making circular activity indicator
Unsolved
QML and Qt Quick
-
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; } } } }
-
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; } } } }
@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.htmlit can be customized too!