Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. Help with making circular activity indicator
Forum Update on Monday, May 27th 2025

Help with making circular activity indicator

Scheduled Pinned Locked Moved Unsolved QML and Qt Quick
2 Posts 2 Posters 212 Views
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • R Offline
    R Offline
    RadiumBall
    wrote on last edited by
    #1

    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.HilkJ 1 Reply Last reply
    0
    • R 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.HilkJ Offline
      J.HilkJ Offline
      J.Hilk
      Moderators
      wrote on last edited by
      #2

      @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!


      Be aware of the Qt Code of Conduct, when posting : https://forum.qt.io/topic/113070/qt-code-of-conduct


      Q: What's that?
      A: It's blue light.
      Q: What does it do?
      A: It turns blue.

      1 Reply Last reply
      1

      • Login

      • Login or register to search.
      • First post
        Last post
      0
      • Categories
      • Recent
      • Tags
      • Popular
      • Users
      • Groups
      • Search
      • Get Qt Extensions
      • Unsolved