qml circular progress bar with gradient

ProgressCircle.qml

import QtQuick 2.15
import QtGraphicalEffects 1.0 as QGE
import QtQuick.Shapes 1.15 as QQS

Item {
    id: control

    implicitHeight: 150
    implicitWidth:  150

    anchors.centerIn: parent

    property alias  startAngle: path.startAngle
    property alias  sweepAngle: path.sweepAngle
    property alias  start:      borderGradient.start
    property alias  end:        borderGradient.end
    property alias  strokeWidth:shapePath.strokeWidth
    property alias  gradient:   borderGradient.gradient

    QGE.LinearGradient {
        id: borderGradient

        anchors.fill: parent
        start: Qt.point(0,0)
        end: Qt.point(control.width,control.height)
        smooth: true
        visible: false

        gradient: Gradient {
            GradientStop { position: 0.33; color: "#c457c4" }
            GradientStop { position: 1.0; color: "#4b7ec2" }
        }
    }

    QQS.Shape {
        id: mask

        anchors.fill: parent
        smooth: true

        layer.enabled: true
        layer.samples: 4

        QQS.ShapePath {
            id: shapePath
            fillColor: 'transparent'
            strokeColor: "darkBlue"
            strokeWidth: 3
            capStyle: QQS.ShapePath.FlatCap

            PathAngleArc {
                id: path

                centerX: mask.width/2 ; centerY: mask.height/2
                radiusX: mask.width/2 - shapePath.strokeWidth;
                radiusY: mask.height/2 - shapePath.strokeWidth

                startAngle: -90
                sweepAngle: slider.value
            }
        }
    }

    QGE.OpacityMask {
        anchors.fill: borderGradient
        source: borderGradient
        maskSource: mask
    }
}

QML circular bar with gradient

• start: defines the start point of the gradient.
• end: defines the endpoint of the gradient.
• gradient: defines the gradient Item.
• startAngle: defines the sweep angle of the arc.
• sweepAngle: defines the start angle of the arc.
• strokeWidth: defines the start point of the gradient.

Preview