Make a round progress bar

[DavidM29]

Hello,

I would like to make a round progress bar close to that :

I don't know how to achieve this. Does anybody can give me clue about how to start at least ?

Thanks in advance

[sierdzio]

I guess something like this could work:

Rectangle {
  property int value: 0
  width: 300
  height: width
  border.width: 5
  radius: width * .5
  clip: true

  Rectangle {
    with: parent.width
    height: parent.height * parent.value / 100 // percentage
    color: "#ff0000"
  }
}

Untested.

[DavidM29]

@sierdzio said in Make a round progress bar:

Rectangle {
property int value: 0
width: 300
height: width
border.width: 5
radius: width * .5
clip: true

Rectangle {
with: parent.width
height: parent.height * parent.value / 100 // percentage
color: "#ff0000"
}
}

It is not working here is the result :
I tried something close to this but I have'nt been able to get the same shape as the parent rectangle.

[JonB]

@DavidM29 said in Make a round progress bar:

with: parent.width

That should obviously be:
width: parent.width
....

[sierdzio]

OK then one more try and I'll recommend something else.

Item {
  id: main
  property int value: 0
  width: 300
  height: width

  Rectangle {
    width: parent.width
    height: parent.height * parent.value / 100 // percentage
    color: "#ff0000"
    anchors.bottom: parent.bottom
  }

  Rectangle {
    anchros.fill: parent
    border.width: 5
    radius: width * .5
    clip: true
  }
}

I suppose the renctangle will still stick out, though. You could achieve your goal using QML Canvas, custom QQuickItem painting.

[DavidM29]

@sierdzio here is the result :

Never used Canvas or QuickItem painting. Can you guide me a bit through this ?

[KillerSmath]

@DavidM29

The clip effect is based on rectangle, so, you can reimplement this effect in paint render (c++) or you can use a "rectangle" (item) to shape the inner circle.

   Rectangle{
        property int percentage: 100
        id: root
        width: 300
        height: 300
        radius: width / 2

        color: "white"
        border.color: "#385d8a"
        border.width: 5

        Item{
            anchors.bottom: parent.bottom
            anchors.left: parent.left
            anchors.right: parent.right
            height: parent.height * parent.percentage / 100
            clip: true

            Rectangle{
                width: root.width - root.border.width * 2
                height: root.height - root.border.width * 2
                radius: width / 2
                anchors.bottom: parent.bottom
                anchors.left: parent.left
                anchors.margins: root.border.width
                color: "red"
            }
        }

        Text{
            anchors.centerIn: parent
            font.pixelSize: 20
            text: root.percentage.toString() + "%"
        }
    }

[DavidM29]

Works nicely ! Thank you !
I have another question :
For an image is it possible to do the same for example, considering this as an image :

like a .svg file, would it be possible to color just the circle of the image with the same rendering ?

If you want I can make a new post for this.

[KillerSmath]

@DavidM29
I believe for image you can apply a mask in the image
This post has a good solution:
https://stackoverflow.com/a/32710773

Opacity Mask Documentation

[DavidM29]

I believe I did not express my self clearly.

From the the image on my previous post I would like to know how to do something like that :
The idea is to have a variable part on the image.
Maybe it should be separate in different step like that :

The background would be always present and the filling appear partially depending on the value.

[KillerSmath]

@DavidM29 do you want to create an animation of loading of image starting on bottom and ending on top ?

[DavidM29]

I want to animated just a part of the image. I want to keep a constant part. Assuming this image :
I want to keep the wheel and glass but I want to animate the Orange color of the car. Loading like the circle on the previous messages.
Not sure it is very clear. I'm trying to find a real exemple somewhere.

Edit :

Like here https://cdn.dribbble.com/users/100142/screenshots/2920352/loading-animation-cd-v2.gif
There is the middle of the display animated and the rest of it is fixed. I would like to anime the display from bottom to top and keeping the border fixed.
Or from the example above Fill my background image on the transparent circle with the red circle.

[KillerSmath]

@DavidM29
Something like that:

Item{
        width: 350
        height: 150
        anchors.centerIn: parent
        Rectangle{
            id: rect
            color: "steelblue"
            width: 350
            anchors.bottom: parent.bottom

            SequentialAnimation{
                running: true
                loops: Animation.Infinite
                NumberAnimation{
                    target: rect
                    properties: "height"
                    from: 0
                    to: 150
                    duration: 5000
                }
                NumberAnimation{
                    target: rect
                    properties: "height"
                    from: 150
                    to: 0
                    duration: 5000
                }
            }
        }
    }

[DavidM29]

@KillerSmath

Yes exactly but with a constant border wich is like an image.

[KillerSmath]

@DavidM29
Using the previous posts, you can use mask with rectangle loader.

Obs: the maximum radius = min_between(width, height) / 2

Code

import QtQuick 2.8
import QtGraphicalEffects 1.0

  Rectangle{
        property int imgRadius: Math.min(imgContainer.width, imgContainer.height) / 2
        property int borderWidth: 3

        id: imgContainer
        width: 190
        height: 190
        anchors.centerIn: parent
        color: "#f2f2f2"
        border.color: "#385d8a"
        border.width: borderWidth
        radius: imgRadius

        Image {
            id: img
            anchors.fill: parent
            source: "https://www.gnu.org/graphics/nu-gnu.svg"
            layer.enabled: true
            layer.effect: OpacityMask {
                maskSource: Item {
                    width: imgContainer.width
                    height: imgContainer.height
                    Rectangle{
                        id: rectContainer
                        width: parent.width
                        anchors.bottom: parent.bottom
                        clip: true
                        color: "transparent"
                        Rectangle {
                            id: rectMask
                            anchors.bottom: parent.bottom
                            anchors.left: parent.left
                            anchors.right: parent.right
                            anchors.margins: imgContainer.borderWidth
                            height: img.height - imgContainer.borderWidth * 2
                            radius: Math.max(0, imgContainer.imgRadius-imgContainer.borderWidth)
                        }
                        SequentialAnimation{
                            running: img.status == Image.Ready
                            loops: Animation.Infinite

                            NumberAnimation{
                                target: rectContainer
                                properties: "height"
                                from: 0
                                to: img.height
                                duration: 5000
                            }
                            PauseAnimation{
                                duration: 1000
                            }

                            NumberAnimation{
                                target: rectContainer
                                properties: "height"
                                from: img.height
                                to: 0
                                duration: 5000
                            }

                            PauseAnimation{
                                duration: 1000
                            }
                        }
                    }
                }
            }
        }
    }

Full Code Link - Git Hub

[DavidM29]

That is close to what I want but this will work only on standard shape like rectangle or circle. If I wan't to have this effect inside an image it will not work doesn't it ?