Progress bars can show the percentage on top

The percentage (rounded down, in the element's font) is centred inside the
bar and its dots invert the bar, so it reads on the filled and the empty
part. It uses the bar's unused format and font fields, so the page format
stays the same. The Bad page shows it.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

examples/home-pages.json

@@ -1,7 +1,7 @@
 {
  "format": "flipdot-backup",
  "version": 1,
- "firmware": "2.13.0",
+ "firmware": "2.16.0",
  "exported": "2026-10-16T00:00:00Z",
  "bitmaps": [],
  "icons": [
@@ -298,6 +298,7 @@
       "bitmap": "bg printer"
      }
     ],
+    "effect": -1,
     "elements": [
      {
       "type": "ha",
@@ -398,6 +399,7 @@
       "bitmap": "bg printer"
      }
     ],
+    "effect": -1,
     "elements": [
      {
       "type": "ha",
@@ -527,6 +529,7 @@
       "bitmap": "bg kerst"
      }
     ],
+    "effect": -1,
     "elements": [
      {
       "type": "text",
@@ -598,6 +601,7 @@
       "bitmap": "bg bad"
      }
     ],
+    "effect": 0,
     "elements": [
      {
       "type": "clock",
@@ -634,8 +638,8 @@
       "y": 11,
       "align": "left",
       "overlay": "top",
-      "font": "Normal",
-      "format": 0,
+      "font": "Small",
+      "format": 1,
       "language": "nl",
       "decimals": -1,
       "text": "",
@@ -669,6 +673,7 @@
       "bitmap": "bg binnen"
      }
     ],
+    "effect": -1,
     "elements": [
      {
       "type": "ha",
@@ -831,6 +836,7 @@
       "bitmap": "bg nacht"
      }
     ],
+    "effect": -1,
     "elements": [
      {
       "type": "clock",
@@ -902,6 +908,7 @@
       "bitmap": "bg datum"
      }
     ],
+    "effect": -1,
     "elements": [
      {
       "type": "date",
@@ -1002,6 +1009,7 @@
       "bitmap": "bg energie"
      }
     ],
+    "effect": -1,
     "elements": [
      {
       "type": "ha",
@@ -1106,6 +1114,7 @@
       "bitmap": "bg vol"
      }
     ],
+    "effect": -1,
     "elements": [
      {
       "type": "clock",
@@ -1148,6 +1157,7 @@
       "bitmap": "plex logo"
      }
     ],
+    "effect": 0,
     "elements": [
      {
       "type": "ha",
@@ -1272,6 +1282,7 @@
    "name": "Stopwatch",
    "page": {
     "slots": [],
+    "effect": -1,
     "elements": [
      {
       "type": "stopwatch",
@@ -1314,6 +1325,7 @@
       "bitmap": "bg verbruik"
      }
     ],
+    "effect": -1,
     "elements": [
      {
       "type": "ha",
@@ -1438,6 +1450,7 @@
    "name": "Verwachting",
    "page": {
     "slots": [],
+    "effect": -1,
     "elements": [
      {
       "type": "image",
@@ -1615,7 +1628,7 @@
      },
      {
       "type": "ha",
-      "x": 47,
+      "x": 46,
       "y": 14,
       "align": "right",
       "overlay": "top",
@@ -1731,7 +1744,7 @@
      },
      {
       "type": "ha",
-      "x": 71,
+      "x": 70,
       "y": 14,
       "align": "right",
       "overlay": "top",
@@ -1794,6 +1807,7 @@
    "name": "Weer",
    "page": {
     "slots": [],
+    "effect": -1,
     "elements": [
      {
       "type": "clock",