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 Updated to NodeBB v4.3 + New Features

Help with making circular activity indicator

Scheduled Pinned Locked Moved Unsolved QML and Qt Quick
2 Posts 2 Posters 213 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 13 May 2021, 07:34 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 1 Reply Last reply 13 May 2021, 07:45
    0
    • R RadiumBall
      13 May 2021, 07:34

      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 Offline
      J Offline
      J.Hilk
      Moderators
      wrote on 13 May 2021, 07:45 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

      1/2

      13 May 2021, 07:34

      • Login

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