1 files changed, 10 insertions, 57 deletions
diff --git a/modules/lock/Resources.qml b/modules/lock/Resources.qml
index 0ba0188..8ff1708 100644
--- a/modules/lock/Resources.qml
+++ b/modules/lock/Resources.qml
@@ -1,4 +1,5 @@
 import qs.components
+import qs.components.controls
 import qs.components.misc
 import qs.services
 import qs.config
@@ -57,69 +58,21 @@ GridLayout {
         required property real value
         required property color colour
 
-        readonly property int thickness: width < 200 ? Appearance.padding.smaller : Appearance.padding.normal
-        readonly property real arcRadius: (width - Appearance.padding.large * 3 - thickness) / 2
-        readonly property real vValue: value || 1 / 360
-        readonly property real gapAngle: ((Appearance.spacing.small + thickness) / (arcRadius || 1)) * (180 / Math.PI)
-
         Layout.fillWidth: true
         implicitHeight: width
 
         color: Colours.layer(Colours.palette.m3surfaceContainerHigh, 2)
         radius: Appearance.rounding.large
 
-        Shape {
-            anchors.fill: parent
-            preferredRendererType: Shape.CurveRenderer
-            asynchronous: true
-
-            ShapePath {
-                fillColor: "transparent"
-                strokeColor: Colours.layer(Colours.palette.m3surfaceContainerHighest, 3)
-                strokeWidth: res.thickness
-                capStyle: ShapePath.RoundCap
-
-                PathAngleArc {
-                    startAngle: -90 + 360 * res.vValue + res.gapAngle
-                    sweepAngle: 360 * (1 - res.vValue) - res.gapAngle * 2
-                    radiusX: res.arcRadius
-                    radiusY: res.arcRadius
-                    centerX: res.width / 2
-                    centerY: res.width / 2
-                }
-
-                Behavior on strokeColor {
-                    ColorAnimation {
-                        duration: Appearance.anim.durations.large
-                        easing.type: Easing.BezierSpline
-                        easing.bezierCurve: Appearance.anim.curves.standard
-                    }
-                }
-            }
-
-            ShapePath {
-                fillColor: "transparent"
-                strokeColor: res.colour
-                strokeWidth: res.thickness
-                capStyle: ShapePath.RoundCap
-
-                PathAngleArc {
-                    startAngle: -90
-                    sweepAngle: 360 * res.vValue
-                    radiusX: res.arcRadius
-                    radiusY: res.arcRadius
-                    centerX: res.width / 2
-                    centerY: res.width / 2
-                }
+        CircularProgress {
+            id: circ
 
-                Behavior on strokeColor {
-                    ColorAnimation {
-                        duration: Appearance.anim.durations.large
-                        easing.type: Easing.BezierSpline
-                        easing.bezierCurve: Appearance.anim.curves.standard
-                    }
-                }
-            }
+            anchors.fill: parent
+            value: res.value
+            padding: Appearance.padding.large * 3
+            fgColour: res.colour
+            bgColour: Colours.layer(Colours.palette.m3surfaceContainerHighest, 3)
+            strokeWidth: width < 200 ? Appearance.padding.smaller : Appearance.padding.normal
         }
 
         MaterialIcon {
@@ -128,7 +81,7 @@ GridLayout {
             anchors.centerIn: parent
             text: res.icon
             color: res.colour
-            font.pointSize: (res.arcRadius * 0.7) || 1
+            font.pointSize: (circ.arcRadius * 0.7) || 1
             font.weight: 600
         }