docs(widget): add option for label at center of progress bar

Author: pitchaya-s

docs/widgets/(Widget)-Brightness.md

@@ -20,7 +20,7 @@
 | `animation`         | dict    | `{'enabled': True, 'type': 'fadeInOut', 'duration': 200}`               | Animation settings for the widget.                                          |
 | `container_shadow`   | dict   | `None`                  | Container shadow options.                       |
 | `label_shadow`         | dict   | `None`                  | Label shadow options.                 |
-| `progress_bar`       | dict    | `{'enabled': False, 'position': 'left', 'size': 14, 'thickness': 2, 'color': '#57948a', animation: True}` | Progress bar settings.    |
+| `progress_bar`       | dict    | `{'enabled': False, 'position': 'left', 'size': 14, 'thickness': 2, 'color': '#57948a', animation: True, 'center_label': ''}` | Progress bar settings.    |
 ## Example Configuration
 
 ```yaml
@@ -95,13 +95,15 @@
   - **color**: The color of the progress bar. Color can be single color or gradient. For example, `color: "#57948a"` or `color: ["#57948a", "#ff0000"]"` for a gradient.
   - **background_color**: The background color of the progress bar.
   - **animation**: Whether to enable smooth change of the progress bar value.
+  - **center_label**: The label that will be centered inside the progress bar (can be styled using `.progress-circle`)
 
 ## Example Style
 ```css
 .brightness-widget {}
 .brightness-widget .widget-container {}
 .brightness-widget .widget-container .label {}
 .brightness-widget .widget-container .icon {}
+.brightness-widget .progress-circle {}
 ```
 
 ## Style for the brightness menu

docs/widgets/(Widget)-CPU.md

@@ -13,7 +13,7 @@
 | `animation`         | dict    | `{'enabled': true, 'type': 'fadeInOut', 'duration': 200}`               | Animation settings for the widget.                                          |
 | `container_shadow`   | dict   | `None`                  | Container shadow options.                       |
 | `label_shadow`         | dict   | `None`                  | Label shadow options.                 |
-| `progress_bar`       | dict    | `{'enabled': false, 'position': 'left', 'size': 14, 'thickness': 2, 'color': '#57948a', 'animation': false}` | Progress bar settings.                                                      |
+| `progress_bar`       | dict    | `{'enabled': false, 'position': 'left', 'size': 14, 'thickness': 2, 'color': '#57948a', 'animation': false, 'center_label': ''}` | Progress bar settings.                                                      |
 | `hide_decimal`       | bool    | `false`                                                                 | Whether to hide decimal places in the CPU widget.                          |
 
 ## Example Configuration
@@ -71,6 +71,7 @@ cpu:
   - **color**: The color of the progress bar. Color can be single color or gradient. For example, `color: "#57948a"` or `color: ["#57948a", "#ff0000"]"` for a gradient.
   - **background_color**: The background color of the progress bar.
   - **animation**: Whether to enable smooth change of the progress bar value.
+  - **center_label**: The label that will be centered inside the progress bar (can be styled using `.progress-circle`)
 
 ## Available Placeholders
 

docs/widgets/(Widget)-Disk.md

@@ -13,7 +13,7 @@
 | `animation`         | dict    | `{'enabled': true, 'type': 'fadeInOut', 'duration': 200}`               | Animation settings for the widget.                                          |
 | `container_shadow`   | dict   | `None`                  | Container shadow options.                       |
 | `label_shadow`         | dict   | `None`                  | Label shadow options.                 |
-| `progress_bar`       | dict    | `{'enabled': false, 'position': 'left', 'size': 14, 'thickness': 2, 'color': '#57948a', 'animation': false}` | Progress bar settings.    |
+| `progress_bar`       | dict    | `{'enabled': false, 'position': 'left', 'size': 14, 'thickness': 2, 'color': '#57948a', 'animation': false, 'center_label': ''}` | Progress bar settings.    |
 
 ## Example Configuration
 
@@ -81,6 +81,7 @@ disk:
   - **color**: The color of the progress bar. Color can be single color or gradient. For example, `color: "#57948a"` or `color: ["#57948a", "#ff0000"]"` for a gradient.
   - **background_color**: The background color of the progress bar.
   - **animation**: Whether to enable smooth change of the progress bar value.
+  - **center_label**: The label that will be centered inside the progress bar (can be styled using `.progress-circle`)
 
 ## Widget Style
 ```css

docs/widgets/(Widget)-GPU.md

@@ -27,7 +27,7 @@ If you see a table with your GPU information, `nvidia-smi` is available. If you
 | `animation`           | dict    | `{'enabled': true, 'type': 'fadeInOut', 'duration': 200}`               | Animation settings for the widget.                                          |
 | `container_shadow`    | dict    | `{"enabled": False, "color": "black", "offset": [1, 1], "radius": 3}`                                                                  | Container shadow options.                                                   |
 | `label_shadow`        | dict    | `{"enabled": False, "color": "black", "offset": [1, 1], "radius": 3}`                                                                  | Label shadow options.                                                       |
-| `progress_bar`        | dict    | `{'enabled': false, 'position': 'left', 'size': 14, 'thickness': 2, 'color': '#57948a', 'animation': false}` | Progress bar settings.                                                      |
+| `progress_bar`        | dict    | `{'enabled': false, 'position': 'left', 'size': 14, 'thickness': 2, 'color': '#57948a', 'animation': false, 'center_label': ''}` | Progress bar settings.                                                      |
 | `hide_decimal`        | bool    | `false`                                                                 | Whether to hide decimal places in the GPU widget.                          |
 
 > **About `index`:** If you have multiple NVIDIA GPUs, you can set the `gpu_index` option to select which GPU to monitor. Create multiple GPU widgets with different `gpu_index` values (e.g., 0, 1, 2, ...) to display stats for each card separately.
@@ -82,6 +82,7 @@ gpu:
   - **color**: The color of the progress bar. Color can be single color or gradient.
   - **background_color**: The background color of the progress bar.
   - **animation**: Whether to enable smooth change of the progress bar value.
+  - **center_label**: The label that will be centered inside the progress bar (can be styled using `.progress-circle`)
 
 ## Available Placeholders
 

docs/widgets/(Widget)-Memory.md

@@ -11,7 +11,7 @@
 | `animation`         | dict    | `{'enabled': true, 'type': 'fadeInOut', 'duration': 200}`               | Animation settings for the widget.                                          |
 | `container_shadow`   | dict   | `None`                  | Container shadow options.                       |
 | `label_shadow`         | dict   | `None`                  | Label shadow options.                 |
-| `progress_bar`       | dict    | `{'enabled': False, 'position': 'left', 'size': 14, 'thickness': 2, 'color': '#57948a', 'animation': True}` | Progress bar settings.    |
+| `progress_bar`       | dict    | `{'enabled': False, 'position': 'left', 'size': 14, 'thickness': 2, 'color': '#57948a', 'animation': True, 'center_label': ''}` | Progress bar settings.    |
 | `hide_decimal`       | boolean    | `false`                                                                 | Whether to hide decimal places in the memory widget. |
 
 ## Example Configuration
@@ -69,6 +69,7 @@ memory:
   - **color**: The color of the progress bar. Color can be single color or gradient. For example, `color: "#57948a"` or `color: ["#57948a", "#ff0000"]"` for a gradient.
   - **background_color**: The background color of the progress bar.
   - **animation**: Whether to enable smooth change of the progress bar value.
+  - **center_label**: The label that will be centered inside the progress bar (can be styled using `.progress-circle`)
 
 The `label` and `label_alt` options use format strings that can include placeholders for memory metrics. These placeholders will be replaced with actual values when the widget is rendered. You can use `{virtual_mem_free}`, `{virtual_mem_percent}`, `{virtual_mem_total}`, `{virtual_mem_avail}`, `{virtual_mem_used}`, `{virtual_mem_outof}`, `{swap_mem_free}`, `{swap_mem_percent}`, `{swap_mem_total}`
 

docs/widgets/(Widget)-Microphone.md

@@ -14,7 +14,7 @@
 | `container_shadow`   | dict   | `None`                  | Container shadow options.                       |
 | `label_shadow`         | dict   | `None`                  | Label shadow options.                 |
 | `mic_menu` | dict | `{'blur': True, 'round_corners': True, 'round_corners_type': 'normal', 'border_color': 'system', 'alignment': 'right', 'direction': 'down', 'offset_top': 6, 'offset_left': 0}` | Menu settings for the widget. |
-| `progress_bar`       | dict    | `{'enabled': False, 'position': 'left', 'size': 14, 'thickness': 2, 'color': '#57948a', animation: True}` | Progress bar settings.    |
+| `progress_bar`       | dict    | `{'enabled': False, 'position': 'left', 'size': 14, 'thickness': 2, 'color': '#57948a', animation: True, 'center_label': ''}` | Progress bar settings.    |
 
 
 ## Example Configuration
@@ -76,6 +76,7 @@ microphone:
   - **color**: The color of the progress bar. Color can be single color or gradient. For example, `color: "#57948a"` or `color: ["#57948a", "#ff0000"]"` for a gradient.
   - **background_color**: The background color of the progress bar.
   - **animation**: Whether to enable smooth change of the progress bar value.
+  - **center_label**: The label that will be centered inside the progress bar (can be styled using `.progress-circle`)
 
 ## Example Style
 ```css

docs/widgets/(Widget)-Pomodoro.md

@@ -22,7 +22,7 @@ This widget implements a Pomodoro timer, which is a time management method that
 | `menu` | dict | See below | Configure the appearance and behavior of the timer menu. |
 | `container_shadow`   | dict   | `None`                  | Container shadow options.                       |
 | `label_shadow`         | dict   | `None`                  | Label shadow options.                 |
-| `progress_bar`       | dict    | `{'enabled': false, 'position': 'left', 'size': 14, 'thickness': 2, 'color': '#57948a', 'animation': true}` | Progress bar settings.    |
+| `progress_bar`       | dict    | `{'enabled': false, 'position': 'left', 'size': 14, 'thickness': 2, 'color': '#57948a', 'animation': true, 'center_label': ''}` | Progress bar settings.    |
 
 ## Example Configuration
 
@@ -115,6 +115,7 @@ pomodoro:
   - **color**: The color of the progress bar. Color can be single color or gradient. For example, `color: "#57948a"` or `color: ["#57948a", "#ff0000"]"` for a gradient.
   - **background_color**: The background color of the progress bar.
   - **animation**: Whether to enable smooth change of the progress bar value.
+  - **center_label**: The label that will be centered inside the progress bar (can be styled using `.progress-circle`)
 
 ## Available Callbacks
 

docs/widgets/(Widget)-Volume.md

@@ -14,7 +14,7 @@
 | `animation`         | dict    | `{'enabled': True, 'type': 'fadeInOut', 'duration': 200}`               | Animation settings for the widget.                                          |
 | `container_shadow`   | dict   | `None`                  | Container shadow options.                       |
 | `label_shadow`         | dict   | `None`                  | Label shadow options.                 |
-| `progress_bar`       | dict    | `{'enabled': false, 'position': 'left', 'size': 14, 'thickness': 2, 'color': '#57948a', 'animation': true}` | Progress bar settings.    |
+| `progress_bar`       | dict    | `{'enabled': false, 'position': 'left', 'size': 14, 'thickness': 2, 'color': '#57948a', 'animation': true, 'center_label': ''}` | Progress bar settings.    |
 
 
 ## Example Configuration
@@ -79,6 +79,7 @@ volume:
   - **color**: The color of the progress bar. Color can be single color or gradient. For example, `color: "#57948a"` or `color: ["#57948a", "#ff0000"]` for a gradient.
   - **background_color**: The background color of the progress bar.
   - **animation**: Whether to enable smooth change of the progress bar value.
+  - **center_label**: The label that will be centered inside the progress bar (can be styled using `.progress-circle`)
 
 ## Example Style
 ```css