osd

.config/quickshell/modules/common/Appearance.qml

@@ -134,6 +134,7 @@ Singleton {
         property color colTooltip: m3colors.m3inverseSurface
         property color colOnTooltip: m3colors.m3inverseOnSurface
         property color colScrim: transparentize(m3colors.m3scrim, 0.5)
+        property color colShadow: transparentize(m3colors.m3shadow, 0.75)
     }
 
     rounding: QtObject {

.config/quickshell/modules/common/ConfigOptions.qml

@@ -26,12 +26,16 @@ Singleton {
         }
     }
 
+    property QtObject osd: QtObject {
+        property int timeout: 1000
+    }
+
     property QtObject resources: QtObject {
         property int updateInterval: 3000
     }
 
     property QtObject hacks: QtObject {
-        property int arbitraryRaceConditionDelay: 10
+        property int arbitraryRaceConditionDelay: 10 // milliseconds
     }
 
 }

.config/quickshell/modules/common/widgets/CircularProgress.qml

@@ -1,6 +1,6 @@
 // From https://github.com/rafzby/circular-progressbar
 // License: LGPL-3.0 - A copy can be found in `licenses` folder of repo
-// Modified
+// Modified so it looks like in Material 3: https://m3.material.io/components/progress-indicators/specs
 import QtQuick 2.9
 
 Item {

.config/quickshell/modules/common/widgets/StyledProgressBar.qml

@@ -0,0 +1,57 @@
+import "root:/services"
+import "root:/modules/common"
+import "root:/modules/common/widgets"
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import Quickshell
+import Quickshell.Widgets
+import Qt5Compat.GraphicalEffects
+
+ProgressBar {
+    id: root
+    property real valueBarWidth: 120
+    property real valueBarHeight: 4
+    property real valueBarGap: 4
+
+    Behavior on value {
+        NumberAnimation {
+            duration: Appearance.animation.elementDecel.duration
+            easing.type: Appearance.animation.elementDecel.type
+        }
+    }
+    
+    background: Rectangle {
+        anchors.fill: parent
+        color: "transparent"
+        radius: Appearance.rounding.full
+        implicitHeight: valueBarHeight
+        implicitWidth: valueBarWidth
+    }
+
+    contentItem: Item {
+        implicitWidth: parent.width
+        implicitHeight: parent.height
+
+        Rectangle { // Left progress fill
+            width: root.visualPosition * parent.width
+            height: parent.height
+            radius: Appearance.rounding.full
+            color: Appearance.m3colors.m3primary
+        }
+        Rectangle { // Right remaining part fill
+            anchors.right: parent.right
+            width: (1 - root.visualPosition) * parent.width - valueBarGap
+            height: parent.height
+            radius: Appearance.rounding.full
+            color: Appearance.m3colors.m3secondaryContainer
+        }
+        Rectangle { // Stop point
+            anchors.right: parent.right
+            width: valueBarGap
+            height: valueBarGap
+            radius: Appearance.rounding.full
+            color: Appearance.m3colors.m3primary
+        }
+    }
+}