Circular Progress Bar

Using Qt5 & its built in components, Circular Progress Bar is made as given below.

import QtQuick 2.0
import QtQuick.Controls 1.0

Item {
    id: circularProgress
    width: 360
    height: width

    property real minimumValue: 0
    property real maximumValue: 100
    property real value:    0
    property real previousValue:    0

    signal progressCompleted()

    property int loadtimer: 4000
    property color circleColor: "transparent"
    property color borderColor: "#1a70e0"
    property int borderWidth: 10

    property bool finished: false;
    onFinishedChanged: {
        if(finished) {
            part2.rotation = 360
            part1.rotation = 360
            progressCompleted()
        }
    }
  

    function start(){
        part1.rotation = 180
        part2.rotation = 180
        finished = false
    }

    function setValue(v) {
        var newval = parseFloat(v)
        if (!isNaN(newval)) {
            // we give minimumValue priority over maximum if they are inconsistent
            if (newval > maximumValue) {
                if (maximumValue >= minimumValue)
                    newval = maximumValue;
                else
                    newval = minimumValue
            } else if (v < minimumValue) {
                newval = minimumValue
            }
            if (value !== newval)
                value = newval
        }
        increaseProgress(value)
    }

    function increaseProgress(v) {
        if(value >= maximumValue && !finished) {
            finished = true
            return
        }

        var incearseRot = ((v - previousValue)/maximumValue) * 360

        if(part2.rotation < 360) {
            if(part2.rotation + incearseRot > 360)
                part2.rotation = 360
            else
                part2.rotation += incearseRot
            console.log("part2", part2.rotation, incearseRot, value, previousValue)
        }
        else {
            if(part2.rotation < 360 || part2.rotation > 360)
                part2.rotation = 360

            if(part1.rotation < 360) {
                if(part1.rotation + incearseRot > 360)
                    part1.rotation = 360
                else
                    part1.rotation += incearseRot
                console.log("part1", part1.rotation, incearseRot, value)
            }
        }
        if(value >= maximumValue) {
            finished = true
        }
        previousValue = v
    }

    Rectangle{
        width: circle.width-(borderWidth*2)
        height: circle.height-(borderWidth*2)
        radius: width/2
        x:borderWidth
        y:borderWidth
        color: circleColor
        border.color: Qt.lighter(borderColor)
        border.width: borderWidth
        smooth: true
    }

    Row {
        id: circle
        anchors.fill: parent

        Item {
            width: parent.width/2
            height: parent.height
            clip: true
            smooth: true

            Item {
                id: part1
                width: parent.width
                height: parent.height
                clip: true
                smooth: true
                rotation: 180; Behavior on rotation { NumberAnimation { duration: 10 } }
                transformOrigin: Item.Right

                Rectangle{
                    width: circle.width-(borderWidth*2)
                    height: circle.height-(borderWidth*2)
                    radius: width/2
                    x:borderWidth
                    y:borderWidth
                    color: circleColor
                    border.color: borderColor
                    border.width: borderWidth
                    smooth: true
                }
            }
        }

        Item {
            width: parent.width/2
            height: parent.height
            clip: true
            smooth: true

            Item{
                id: part2
                width: parent.width
                height: parent.height
                clip: true
                smooth: true
                rotation: 180; Behavior on rotation { NumberAnimation { duration: 10 } }
                transformOrigin: Item.Left

                Rectangle {
                    width: circle.width-(borderWidth*2)
                    height: circle.height-(borderWidth*2)
                    radius: width/2
                    x: -width/2
                    y: borderWidth
                    color: circleColor
                    border.color: borderColor
                    border.width: borderWidth
                    smooth: true
                }
            }
        }
    }


    Rectangle {
        anchors.centerIn: parent
        width:  20
        height: 20
        Label {
            anchors.centerIn: parent
            font.bold: true
            text: parseInt((value/maximumValue)*100) + "%"
        }
    }
}

That's it enjoy. :)
&
Thanks for reading if you like the content please like or comment..