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
@@ -198,9 +203,35 @@
         PlasmaComponents.ToolButton {
             id: closeButton
             tooltip: i18nd("plasma_applet_org.kde.plasma.notifications", "Close")
-            iconSource: "window-close"
             visible: false
             onClicked: notificationHeading.closeClicked()
+
+            PlasmaCore.IconItem {
+                anchors.fill: parent
+                anchors.margins: units.smallSpacing + units.devicePixelRatio * 2
+                source: "window-close"
+                roundToIconSize: false
+                active: closeButton.hovered
+
+                Charts.PieChart {
+                    anchors.fill: parent
+                    anchors.margins: -units.devicePixelRatio
+
+                    opacity: notificationHeading.remainingTime > 0 && notificationHeading.remainingTime < notificationHeading.timeout
+                    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
@@ -146,41 +146,13 @@
                 }
             }
 
-            Timer {
-                id: timeoutIndicatorDelayTimer
-                // only show indicator for the last ten seconds of timeout
-                readonly property int remainingTimeout: 10000
-                interval: Math.max(0, timer.interval - remainingTimeout)
-                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: timer.interval
+                running: timer.running && units.longDuration > 1
             }
 
             NotificationItem {
@@ -198,6 +170,8 @@
                 thumbnailTopPadding: -notificationPopup.margins.top
                 thumbnailBottomPadding: -notificationPopup.margins.bottom
 
+                timeout: timer.running ? timer.interval : 0
+
                 closable: true
                 onBodyClicked: {
                     if (area.acceptedButtons & mouse.button) {