diff --git a/applets/notifications/package/contents/ui/CompactRepresentation.qml b/applets/notifications/package/contents/ui/CompactRepresentation.qml
--- a/applets/notifications/package/contents/ui/CompactRepresentation.qml
+++ b/applets/notifications/package/contents/ui/CompactRepresentation.qml
@@ -24,6 +24,8 @@
 import org.kde.plasma.core 2.0 as PlasmaCore
 import org.kde.plasma.components 2.0 as PlasmaComponents
 
+import org.kde.quickcharts 1.0 as Charts
+
 MouseArea {
     id: compactRoot
 
@@ -66,29 +68,15 @@
 
         elementId: "notification-inactive"
 
-        Item {
-            id: jobProgressItem
-            anchors {
-                left: parent.left
-                top: parent.top
-                bottom: parent.bottom
-            }
-            width: notificationIcon.width * (jobsPercentage / 100)
+        Charts.PieChart {
+            anchors.fill: parent
 
-            clip: true
-            visible: false
+            range { from: 0; to: 100; automatic: false }
 
-            PlasmaCore.SvgItem {
-                anchors {
-                    left: parent.left
-                    top: parent.top
-                    bottom: parent.bottom
-                }
-                width: notificationIcon.width
+            valueSources: Charts.SingleValueSource { value: compactRoot.jobsPercentage }
+            colorSource: Charts.SingleValueSource { value: theme.highlightColor }
 
-                svg: notificationSvg
-                elementId: "notification-progress-active"
-            }
+            thickness: units.devicePixelRatio * 5
         }
 
         PlasmaComponents.Label {
@@ -112,6 +100,7 @@
             anchors.fill: parent
             visible: false
             running: visible
+            opacity: compactRoot.jobsPercentage == 0 ? 1 : 0
         }
     }