diff --git a/CMakeLists.txt b/CMakeLists.txt
--- a/CMakeLists.txt
+++ b/CMakeLists.txt
@@ -43,6 +43,12 @@
     TYPE RUNTIME
 )
 
+find_package(KF5QuickCharts ${KF5_MIN_VERSION} CONFIG)
+set_package_properties(KF5QuickCharts PROPERTIES
+    DESCRIPTION "Used for rendering charts"
+    TYPE RUNTIME
+)
+
 # WARNING PlasmaQuick provides unversioned CMake config
 find_package(KUserFeedback)
 find_package(KF5 REQUIRED COMPONENTS PlasmaQuick)
diff --git a/applets/notifications/package/contents/ui/NotificationHeader.qml b/applets/notifications/package/contents/ui/NotificationHeader.qml
--- a/applets/notifications/package/contents/ui/NotificationHeader.qml
+++ b/applets/notifications/package/contents/ui/NotificationHeader.qml
@@ -30,6 +30,8 @@
 
 import org.kde.kcoreaddons 1.0 as KCoreAddons
 
+import org.kde.quickcharts 1.0 as Charts
+
 import "global"
 
 RowLayout {
@@ -54,6 +56,9 @@
     property int jobState
     property QtObject jobDetails
 
+    property real timeout: 5000
+    property real remainingTime: 0
+
     signal configureClicked
     signal dismissClicked
     signal closeClicked
@@ -201,6 +206,27 @@
             iconSource: "window-close"
             visible: false
             onClicked: notificationHeading.closeClicked()
+
+            Charts.PieChart {
+                anchors.fill: parent
+                anchors.margins: parent.width / 4 - units.devicePixelRatio * 2
+
+                opacity: (notificationHeading.remainingTime > 0 && notificationHeading.remainingTime < notificationHeading.timeout) ? 1 : 0
+                Behavior on opacity {
+                    NumberAnimation {
+                        duration: units.longDuration
+                    }
+                }
+
+                range { from: 0; to: notificationHeading.timeout; automatic: false }
+
+                valueSources: Charts.SingleValueSource { value: notificationHeading.timeout - notificationHeading.remainingTime }
+                colorSource: Charts.SingleValueSource { value: "transparent" }
+
+                backgroundColor: theme.highlightColor
+
+                thickness: units.devicePixelRatio * 5
+            }
         }
     }
 
diff --git a/applets/notifications/package/contents/ui/NotificationItem.qml b/applets/notifications/package/contents/ui/NotificationItem.qml
--- a/applets/notifications/package/contents/ui/NotificationItem.qml
+++ b/applets/notifications/package/contents/ui/NotificationItem.qml
@@ -79,6 +79,9 @@
     property int thumbnailTopPadding: 0
     property int thumbnailBottomPadding: 0
 
+    property alias timeout: notificationHeading.timeout
+    property alias remainingTime: notificationHeading.remainingTime
+
     readonly property bool menuOpen: bodyLabel.contextMenu !== null
                                      || (thumbnailStripLoader.item && thumbnailStripLoader.item.menuOpen)
                                      || (jobLoader.item && jobLoader.item.menuOpen)
diff --git a/applets/notifications/package/contents/ui/NotificationPopup.qml b/applets/notifications/package/contents/ui/NotificationPopup.qml
--- a/applets/notifications/package/contents/ui/NotificationPopup.qml
+++ b/applets/notifications/package/contents/ui/NotificationPopup.qml
@@ -154,33 +154,13 @@
                 running: interval > 0 && timer.running
             }
 
-            Rectangle {
-                id: timeoutIndicatorRect
-                anchors {
-                    right: parent.right
-                    rightMargin: -notificationPopup.margins.right
-                    bottom: parent.bottom
-                    bottomMargin: -notificationPopup.margins.bottom
-                }
-                width: units.devicePixelRatio * 3
-                color: theme.highlightColor
-                opacity: timeoutIndicatorAnimation.running ? 0.6 : 0
-                visible: units.longDuration > 1
-                Behavior on opacity {
-                    NumberAnimation {
-                        duration: units.longDuration
-                    }
-                }
-
-                NumberAnimation {
-                    id: timeoutIndicatorAnimation
-                    target: timeoutIndicatorRect
-                    property: "height"
-                    from: area.height + notificationPopup.margins.top + notificationPopup.margins.bottom
-                    to: 0
-                    duration: Math.min(timer.interval, timeoutIndicatorDelayTimer.remainingTimeout)
-                    running: timer.running && !timeoutIndicatorDelayTimer.running && units.longDuration > 1
-                }
+            NumberAnimation {
+                target: notificationItem
+                property: "remainingTime"
+                from: timer.interval
+                to: 0
+                duration: Math.min(timer.interval, timeoutIndicatorDelayTimer.remainingTimeout)
+                running: timer.running && !timeoutIndicatorDelayTimer.running && units.longDuration > 1
             }
 
             NotificationItem {
@@ -198,6 +178,8 @@
                 thumbnailTopPadding: -notificationPopup.margins.top
                 thumbnailBottomPadding: -notificationPopup.margins.bottom
 
+                timeout: timer.interval
+
                 closable: true
                 onBodyClicked: {
                     if (area.acceptedButtons & mouse.button) {