From 0862d160e5c091d4778ee62ca369168332c19988 Mon Sep 17 00:00:00 2001
From: Sebastian <zarnor91@gmail.com>
Date: Fri, 16 Oct 2026 11:13:43 +0200
Subject: [PATCH] Give the sync progress bar colour and animation

The bar in the Sync popup is now an AnimatedProgressBar: taller, with a
darker track and the theme's accent fill (orange, frost blue in Nord, green
with a gold shine for Christmas). It shows Godot's busy animation until the
server reports progress, glides to each new value, has a soft highlight
sweeping along the filled part inside its rounded corners, and fills and
pops before the result shows. With Reduce animations it only jumps to its
values.

The styles are SyncProgressBar, SyncProgressBarFill and SyncProgressBarText
in every theme. Anim.stop stops a keyed animation without starting an empty
one.

The server now sends sync times as "MM:SS"; the spec is updated from
MusicServer develop (also the linux-package route), and the test data and
screenshots use the new format.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 common/anim.gd                               |  15 +-
 common/animated_progress_bar.gd              | 118 +++++++
 common/animated_progress_bar.gd.uid          |   1 +
 popups/SyncPopup.tscn                        |   7 +-
 popups/sync_popup.gd                         |  18 +-
 server/generated/progress_response.gd        |   1 +
 server/generated/sync_response.gd            |   1 +
 server/openapi.json                          |  70 +++++
 tests/data/layout_baseline.json              | 314 +++++++++++++++++--
 tests/fakes/ui_tour.gd                       |   4 +-
 tests/integration/test_scene_split.gd        |   2 +-
 tests/integration/test_sync_popup.gd         |  27 +-
 tests/integration/test_theme.gd              |   4 +
 tests/unit/test_animated_progress_bar.gd     |  88 ++++++
 tests/unit/test_animated_progress_bar.gd.uid |   1 +
 tests/unit/test_api_types.gd                 |   8 +-
 themes/christmas_theme.tres                  |  39 +++
 themes/main_theme.tres                       |  39 +++
 themes/nord_theme.tres                       |  39 +++
 themes/original_web_theme.tres               |  39 +++
 20 files changed, 791 insertions(+), 44 deletions(-)
 create mode 100644 common/animated_progress_bar.gd
 create mode 100644 common/animated_progress_bar.gd.uid
 create mode 100644 tests/unit/test_animated_progress_bar.gd
 create mode 100644 tests/unit/test_animated_progress_bar.gd.uid

diff --git a/common/anim.gd b/common/anim.gd
index ec68edb..cf75678 100644
--- a/common/anim.gd
+++ b/common/anim.gd
@@ -24,15 +24,20 @@ static func enabled() -> bool:
 ## one with the same key so they don't fight. Returns null when animations are off or the
 ## node is not in the tree.
 static func tween(node: Node, key: StringName = &"anim") -> Tween:
+	stop(node, key)
+	if !enabled() || !node.is_inside_tree():
+		return null
+	var new_tween: Tween = node.create_tween()
+	node.set_meta(StringName("_tween_" + key), new_tween)
+	return new_tween
+
+
+## Stops the animation called [param key] on [param node], if one is running.
+static func stop(node: Node, key: StringName = &"anim") -> void:
 	var meta: StringName = StringName("_tween_" + key)
 	var old: Variant = node.get_meta(meta) if node.has_meta(meta) else null
 	if old is Tween && (old as Tween).is_valid():
 		(old as Tween).kill()
-	if !enabled() || !node.is_inside_tree():
-		return null
-	var new_tween: Tween = node.create_tween()
-	node.set_meta(meta, new_tween)
-	return new_tween
 
 
 ## Makes [param control] grow from its middle.
diff --git a/common/animated_progress_bar.gd b/common/animated_progress_bar.gd
new file mode 100644
index 0000000..c1375ba
--- /dev/null
+++ b/common/animated_progress_bar.gd
@@ -0,0 +1,118 @@
+class_name AnimatedProgressBar
+extends ProgressBar
+## A progress bar with some life in it:
+## - [method wait] shows Godot's busy animation until there is any progress;
+## - [method move_to] glides to each new value instead of jumping;
+## - a soft highlight sweeps along the filled part, kept inside its rounded corners.
+##
+## The bar's style, e.g. [code]SyncProgressBar[/code], has a [code]shine[/code] colour for
+## the highlight, and two more styles go with it: [code]<style>Fill[/code], a Panel shaped
+## like the filled part that the highlight is kept inside, and [code]<style>Text[/code],
+## the Label with the percentage. With Reduce animations the bar only jumps to its values,
+## with no busy animation or highlight.
+
+## How wide the highlight is, in pixels.
+const SHINE_WIDTH: float = 260.0
+## How fast the highlight moves, in pixels per second.
+const SHINE_SPEED: float = 520.0
+## How far past the end the highlight goes before starting over, so sweeps have a pause.
+const SHINE_GAP: float = 600.0
+
+# The filled part's shape, which only its children are drawn inside
+var _mask: Panel
+var _shine: TextureRect
+# The percentage, drawn above the highlight rather than under it
+var _label: Label
+var _shine_x: float = -SHINE_WIDTH
+
+
+func _ready() -> void:
+	_mask = Panel.new()
+	_mask.mouse_filter = Control.MOUSE_FILTER_IGNORE
+	_mask.clip_children = CanvasItem.CLIP_CHILDREN_ONLY
+	add_child(_mask)
+	_shine = TextureRect.new()
+	_shine.mouse_filter = Control.MOUSE_FILTER_IGNORE
+	_shine.expand_mode = TextureRect.EXPAND_IGNORE_SIZE
+	_shine.stretch_mode = TextureRect.STRETCH_SCALE
+	_mask.add_child(_shine)
+	_label = Label.new()
+	_label.mouse_filter = Control.MOUSE_FILTER_IGNORE
+	_label.horizontal_alignment = HORIZONTAL_ALIGNMENT_CENTER
+	_label.vertical_alignment = VERTICAL_ALIGNMENT_CENTER
+	_label.set_anchors_and_offsets_preset(Control.PRESET_FULL_RECT)
+	_label.visible = show_percentage
+	add_child(_label)
+	show_percentage = false
+	_mask.theme_type_variation = StringName(String(theme_type_variation) + "Fill")
+	_label.theme_type_variation = StringName(String(theme_type_variation) + "Text")
+	theme_changed.connect(_update_style)
+	value_changed.connect(func(_value: float) -> void: _update_label())
+	_update_style()
+	_update_label()
+
+
+func _process(delta: float) -> void:
+	var fill_width: float = fill_width()
+	_mask.size = Vector2(fill_width, size.y)
+	_mask.visible = fill_width > 0.0 && !indeterminate && Anim.enabled()
+	if !_mask.visible:
+		return
+	_shine_x += SHINE_SPEED * delta
+	if _shine_x > fill_width + SHINE_GAP:
+		_shine_x = -SHINE_WIDTH
+	_shine.position = Vector2(_shine_x, 0.0)
+	_shine.size = Vector2(SHINE_WIDTH, size.y)
+
+
+## Shows the busy animation, with no value, until [method move_to] has some progress.
+func wait() -> void:
+	Anim.stop(self, &"progress")
+	value = min_value
+	indeterminate = Anim.enabled()
+	_update_label()
+
+
+## Glides to [param target]. Any progress ends the busy animation.
+func move_to(target: float) -> void:
+	if target > min_value:
+		indeterminate = false
+	var glide: Tween = Anim.tween(self, &"progress")
+	if glide == null:
+		value = target
+		return
+	glide.tween_property(self, "value", target, Anim.SLOW) \
+			.set_trans(Tween.TRANS_QUAD).set_ease(Tween.EASE_OUT)
+
+
+## How wide the filled part is, the way [ProgressBar] draws it.
+func fill_width() -> float:
+	var margins: float = get_theme_stylebox(&"fill").get_minimum_size().x
+	var filled: float = roundf(ratio_done() * (size.x - margins))
+	return filled + margins if filled > 0.0 else 0.0
+
+
+func _update_style() -> void:
+	var shine: Color = get_theme_color(&"shine")
+	var clear: Color = shine
+	clear.a = 0.0
+	var gradient: Gradient = Gradient.new()
+	gradient.offsets = PackedFloat32Array([0.0, 0.5, 1.0])
+	gradient.colors = PackedColorArray([clear, shine, clear])
+	var texture: GradientTexture2D = GradientTexture2D.new()
+	texture.gradient = gradient
+	texture.width = 256
+	texture.height = 1
+	_shine.texture = texture
+
+
+func _update_label() -> void:
+	if _label == null:
+		return
+	_label.text = "" if indeterminate else "%d%%" % roundi(ratio_done() * 100.0)
+
+
+## How much is done, from 0 to 1.
+func ratio_done() -> float:
+	var span: float = max_value - min_value
+	return clampf((value - min_value) / span, 0.0, 1.0) if span > 0.0 else 0.0
diff --git a/common/animated_progress_bar.gd.uid b/common/animated_progress_bar.gd.uid
new file mode 100644
index 0000000..40bea6f
--- /dev/null
+++ b/common/animated_progress_bar.gd.uid
@@ -0,0 +1 @@
+uid://bxjx3kacfqg6j
diff --git a/popups/SyncPopup.tscn b/popups/SyncPopup.tscn
index b7804d4..360c04a 100644
--- a/popups/SyncPopup.tscn
+++ b/popups/SyncPopup.tscn
@@ -1,6 +1,7 @@
 [gd_scene format=3 uid="uid://dpdem7pdxweb5"]
 
 [ext_resource type="Script" uid="uid://c3ejukwth512a" path="res://popups/sync_popup.gd" id="1_8ba47"]
+[ext_resource type="Script" path="res://common/animated_progress_bar.gd" id="progress_bar_script"]
 
 [node name="SyncPopup" type="Control" unique_id=1302914356 node_paths=PackedStringArray("panel")]
 layout_mode = 3
@@ -62,11 +63,11 @@ layout_mode = 2
 
 [node name="SyncProgressBar" type="ProgressBar" parent="SyncPanel/ScrollContainer/SyncVBoxContainer/ProgressHBoxContainer" unique_id=719135231]
 unique_name_in_owner = true
-custom_minimum_size = Vector2(1300, 0)
+custom_minimum_size = Vector2(1300, 32)
 layout_mode = 2
 size_flags_horizontal = 6
-step = 1.0
-rounded = true
+theme_type_variation = &"SyncProgressBar"
+script = ExtResource("progress_bar_script")
 
 [node name="SyncHBoxContainer" type="HBoxContainer" parent="SyncPanel/ScrollContainer/SyncVBoxContainer" unique_id=1156646398]
 unique_name_in_owner = true
diff --git a/popups/sync_popup.gd b/popups/sync_popup.gd
index 918625e..a9837df 100644
--- a/popups/sync_popup.gd
+++ b/popups/sync_popup.gd
@@ -17,7 +17,7 @@ var has_synced: bool = false
 @onready var no_changes_label: Label = %NoChangesLabel
 @onready var progress_hbox: HBoxContainer = %ProgressHBoxContainer
 @onready var sync_hbox: HBoxContainer = %SyncHBoxContainer
-@onready var sync_progress_bar: ProgressBar = %SyncProgressBar
+@onready var sync_progress_bar: AnimatedProgressBar = %SyncProgressBar
 @onready var soundtracks_added_vbox: VBoxContainer = %SoundtracksAddedVBox
 @onready var soundtracks_added_separator: VSeparator = %SoundtracksAddedSeparator
 @onready var soundtracks_readded_vbox: VBoxContainer = %SoundtracksReAddedVBox
@@ -77,13 +77,24 @@ func _on_sync_timeout() -> void:
 		GameLog.debug("data_received: ", data_received)
 		if data_received != null:
 			if data_received.has("progress"):
-				sync_progress_bar.value = int(data_received.progress)
+				sync_progress_bar.move_to(int(data_received.progress))
 				sync_time.text = data_received.time_spent if data_received.has("time_spent") else ""
 			else:
-				on_sync_finished(data_received)
+				_finish_progress(data_received)
 	MusicServerClient.fetch_sync_progress(get_progress)
 
 
+# Fills the bar and lets it pop before the result takes its place
+func _finish_progress(data_received: Dictionary) -> void:
+	sync_timer.stop()
+	if Anim.enabled() && progress_hbox.visible:
+		sync_progress_bar.move_to(sync_progress_bar.max_value)
+		await get_tree().create_timer(Anim.SLOW).timeout
+		Anim.pop(sync_progress_bar, 1.04, Anim.SLOW)
+		await get_tree().create_timer(Anim.SLOW).timeout
+	on_sync_finished(data_received)
+
+
 func on_sync_finished(data_received: Dictionary) -> void:
 	has_synced = true
 	reset_sync_result()
@@ -218,6 +229,7 @@ func show_sync_result() -> void:
 func show_sync_progress() -> void:
 	sync_title_label.text = "Sync in Progress"
 	progress_hbox.visible = true
+	sync_progress_bar.wait()
 	no_changes_label.visible = false
 	sync_hbox.visible = false
 	caught_errors_vbox.visible = false
diff --git a/server/generated/progress_response.gd b/server/generated/progress_response.gd
index 5be6746..f39f603 100644
--- a/server/generated/progress_response.gd
+++ b/server/generated/progress_response.gd
@@ -5,6 +5,7 @@ extends RefCounted
 ## The [code]ProgressResponse[/code] schema of the MusicServer API.
 
 var progress: String
+## How long the sync has been running, as minutes and seconds, e.g. "02:15"
 var time_spent: String
 
 
diff --git a/server/generated/sync_response.gd b/server/generated/sync_response.gd
index 0e3ba2b..7b7e64c 100644
--- a/server/generated/sync_response.gd
+++ b/server/generated/sync_response.gd
@@ -10,6 +10,7 @@ var soundtracks_changed_content: Array[String]
 var soundtracks_changed_title: Dictionary[String, String]
 var soundtracks_re_added: Array[String]
 var soundtracks_removed: Array[String]
+## How long the sync took, as minutes and seconds, e.g. "02:15"
 var total_time: String
 
 
diff --git a/server/openapi.json b/server/openapi.json
index 585d1f4..e6ad95e 100644
--- a/server/openapi.json
+++ b/server/openapi.json
@@ -84,6 +84,7 @@
             "type": "string"
           },
           "time_spent": {
+            "description": "How long the sync has been running, as minutes and seconds, e.g. \"02:15\"",
             "type": "string"
           }
         },
@@ -447,6 +448,7 @@
             "type": "array"
           },
           "total_time": {
+            "description": "How long the sync took, as minutes and seconds, e.g. \"02:15\"",
             "type": "string"
           }
         },
@@ -885,6 +887,74 @@
         ]
       }
     },
+    "/api/v1/download/linux-package": {
+      "get": {
+        "description": "Redirects to the download URL of the latest MusicPlayer release for Linux (package with installer).",
+        "operationId": "download-client-linux-package",
+        "responses": {
+          "302": {
+            "description": "Found",
+            "headers": {
+              "Location": {
+                "schema": {
+                  "description": "Download URL of the asset",
+                  "type": "string"
+                }
+              }
+            }
+          },
+          "401": {
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/APIError"
+                }
+              }
+            },
+            "description": "Unauthorized"
+          },
+          "404": {
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/APIError"
+                }
+              }
+            },
+            "description": "Not Found"
+          },
+          "500": {
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/APIError"
+                }
+              }
+            },
+            "description": "Internal Server Error"
+          },
+          "502": {
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/APIError"
+                }
+              }
+            },
+            "description": "Bad Gateway"
+          }
+        },
+        "security": [
+          {
+            "bearer": []
+          }
+        ],
+        "summary": "Download the latest client for Linux (package with installer)",
+        "tags": [
+          "download"
+        ]
+      }
+    },
     "/api/v1/download/list": {
       "get": {
         "description": "Returns the file names of the latest MusicPlayer release.",
diff --git a/tests/data/layout_baseline.json b/tests/data/layout_baseline.json
index 5207b55..9c96c4c 100644
--- a/tests/data/layout_baseline.json
+++ b/tests/data/layout_baseline.json
@@ -3947,7 +3947,7 @@
     230.0,
     228.0,
     1300.0,
-    27.0
+    32.0
    ],
    "visible": false
   },
@@ -3956,7 +3956,34 @@
     230.0,
     228.0,
     1300.0,
-    27.0
+    32.0
+   ],
+   "visible": false
+  },
+  "SyncPopup/SyncPanel/ScrollContainer/SyncVBoxContainer/ProgressHBoxContainer/SyncProgressBar/#0": {
+   "rect": [
+    230.0,
+    228.0,
+    0.0,
+    32.0
+   ],
+   "visible": false
+  },
+  "SyncPopup/SyncPanel/ScrollContainer/SyncVBoxContainer/ProgressHBoxContainer/SyncProgressBar/#0/#0": {
+   "rect": [
+    230.0,
+    228.0,
+    0.0,
+    0.0
+   ],
+   "visible": false
+  },
+  "SyncPopup/SyncPanel/ScrollContainer/SyncVBoxContainer/ProgressHBoxContainer/SyncProgressBar/#1": {
+   "rect": [
+    230.0,
+    228.0,
+    1300.0,
+    32.0
    ],
    "visible": false
   },
@@ -11770,7 +11797,7 @@
     230.0,
     310.0,
     1460.0,
-    27.0
+    32.0
    ],
    "visible": false
   },
@@ -11779,7 +11806,34 @@
     310.0,
     310.0,
     1300.0,
-    27.0
+    32.0
+   ],
+   "visible": false
+  },
+  "SyncPopup/SyncPanel/ScrollContainer/SyncVBoxContainer/ProgressHBoxContainer/SyncProgressBar/#0": {
+   "rect": [
+    310.0,
+    310.0,
+    0.0,
+    32.0
+   ],
+   "visible": false
+  },
+  "SyncPopup/SyncPanel/ScrollContainer/SyncVBoxContainer/ProgressHBoxContainer/SyncProgressBar/#0/#0": {
+   "rect": [
+    310.0,
+    310.0,
+    0.0,
+    0.0
+   ],
+   "visible": false
+  },
+  "SyncPopup/SyncPanel/ScrollContainer/SyncVBoxContainer/ProgressHBoxContainer/SyncProgressBar/#1": {
+   "rect": [
+    310.0,
+    310.0,
+    1300.0,
+    32.0
    ],
    "visible": false
   },
@@ -16425,7 +16479,7 @@
     230.0,
     228.0,
     1300.0,
-    27.0
+    32.0
    ],
    "visible": false
   },
@@ -16434,7 +16488,34 @@
     230.0,
     228.0,
     1300.0,
-    27.0
+    32.0
+   ],
+   "visible": false
+  },
+  "SyncPopup/SyncPanel/ScrollContainer/SyncVBoxContainer/ProgressHBoxContainer/SyncProgressBar/#0": {
+   "rect": [
+    230.0,
+    228.0,
+    0.0,
+    32.0
+   ],
+   "visible": false
+  },
+  "SyncPopup/SyncPanel/ScrollContainer/SyncVBoxContainer/ProgressHBoxContainer/SyncProgressBar/#0/#0": {
+   "rect": [
+    230.0,
+    228.0,
+    0.0,
+    0.0
+   ],
+   "visible": false
+  },
+  "SyncPopup/SyncPanel/ScrollContainer/SyncVBoxContainer/ProgressHBoxContainer/SyncProgressBar/#1": {
+   "rect": [
+    230.0,
+    228.0,
+    1300.0,
+    32.0
    ],
    "visible": false
   },
@@ -21107,7 +21188,7 @@
     230.0,
     228.0,
     1300.0,
-    27.0
+    32.0
    ],
    "visible": false
   },
@@ -21116,7 +21197,34 @@
     230.0,
     228.0,
     1300.0,
-    27.0
+    32.0
+   ],
+   "visible": false
+  },
+  "SyncPopup/SyncPanel/ScrollContainer/SyncVBoxContainer/ProgressHBoxContainer/SyncProgressBar/#0": {
+   "rect": [
+    230.0,
+    228.0,
+    0.0,
+    32.0
+   ],
+   "visible": false
+  },
+  "SyncPopup/SyncPanel/ScrollContainer/SyncVBoxContainer/ProgressHBoxContainer/SyncProgressBar/#0/#0": {
+   "rect": [
+    230.0,
+    228.0,
+    0.0,
+    0.0
+   ],
+   "visible": false
+  },
+  "SyncPopup/SyncPanel/ScrollContainer/SyncVBoxContainer/ProgressHBoxContainer/SyncProgressBar/#1": {
+   "rect": [
+    230.0,
+    228.0,
+    1300.0,
+    32.0
    ],
    "visible": false
   },
@@ -26328,7 +26436,7 @@
     230.0,
     228.0,
     1300.0,
-    27.0
+    32.0
    ],
    "visible": false
   },
@@ -26337,7 +26445,34 @@
     230.0,
     228.0,
     1300.0,
-    27.0
+    32.0
+   ],
+   "visible": false
+  },
+  "SyncPopup/SyncPanel/ScrollContainer/SyncVBoxContainer/ProgressHBoxContainer/SyncProgressBar/#0": {
+   "rect": [
+    230.0,
+    228.0,
+    0.0,
+    32.0
+   ],
+   "visible": false
+  },
+  "SyncPopup/SyncPanel/ScrollContainer/SyncVBoxContainer/ProgressHBoxContainer/SyncProgressBar/#0/#0": {
+   "rect": [
+    230.0,
+    228.0,
+    0.0,
+    0.0
+   ],
+   "visible": false
+  },
+  "SyncPopup/SyncPanel/ScrollContainer/SyncVBoxContainer/ProgressHBoxContainer/SyncProgressBar/#1": {
+   "rect": [
+    230.0,
+    228.0,
+    1300.0,
+    32.0
    ],
    "visible": false
   },
@@ -31850,7 +31985,7 @@
     230.0,
     228.0,
     1300.0,
-    27.0
+    32.0
    ],
    "visible": false
   },
@@ -31859,7 +31994,34 @@
     230.0,
     228.0,
     1300.0,
-    27.0
+    32.0
+   ],
+   "visible": false
+  },
+  "SyncPopup/SyncPanel/ScrollContainer/SyncVBoxContainer/ProgressHBoxContainer/SyncProgressBar/#0": {
+   "rect": [
+    230.0,
+    228.0,
+    0.0,
+    32.0
+   ],
+   "visible": false
+  },
+  "SyncPopup/SyncPanel/ScrollContainer/SyncVBoxContainer/ProgressHBoxContainer/SyncProgressBar/#0/#0": {
+   "rect": [
+    230.0,
+    228.0,
+    0.0,
+    0.0
+   ],
+   "visible": false
+  },
+  "SyncPopup/SyncPanel/ScrollContainer/SyncVBoxContainer/ProgressHBoxContainer/SyncProgressBar/#1": {
+   "rect": [
+    230.0,
+    228.0,
+    1300.0,
+    32.0
    ],
    "visible": false
   },
@@ -48134,7 +48296,7 @@
     230.0,
     228.0,
     1460.0,
-    109.0
+    114.0
    ],
    "visible": false
   },
@@ -48170,7 +48332,7 @@
     230.0,
     310.0,
     1460.0,
-    27.0
+    32.0
    ],
    "visible": false
   },
@@ -48179,7 +48341,34 @@
     310.0,
     310.0,
     1300.0,
-    27.0
+    32.0
+   ],
+   "visible": false
+  },
+  "SyncPopup/SyncPanel/ScrollContainer/SyncVBoxContainer/ProgressHBoxContainer/SyncProgressBar/#0": {
+   "rect": [
+    310.0,
+    310.0,
+    522.0,
+    32.0
+   ],
+   "visible": false
+  },
+  "SyncPopup/SyncPanel/ScrollContainer/SyncVBoxContainer/ProgressHBoxContainer/SyncProgressBar/#0/#0": {
+   "rect": [
+    310.0,
+    310.0,
+    0.0,
+    0.0
+   ],
+   "visible": false
+  },
+  "SyncPopup/SyncPanel/ScrollContainer/SyncVBoxContainer/ProgressHBoxContainer/SyncProgressBar/#1": {
+   "rect": [
+    310.0,
+    310.0,
+    1300.0,
+    32.0
    ],
    "visible": false
   },
@@ -48640,7 +48829,7 @@
     230.0,
     228.0,
     1460.0,
-    109.0
+    114.0
    ],
    "visible": true
   },
@@ -48676,7 +48865,7 @@
     230.0,
     310.0,
     1460.0,
-    27.0
+    32.0
    ],
    "visible": true
   },
@@ -48685,7 +48874,34 @@
     310.0,
     310.0,
     1300.0,
-    27.0
+    32.0
+   ],
+   "visible": true
+  },
+  "SyncPopup/SyncPanel/ScrollContainer/SyncVBoxContainer/ProgressHBoxContainer/SyncProgressBar/#0": {
+   "rect": [
+    310.0,
+    310.0,
+    522.0,
+    32.0
+   ],
+   "visible": false
+  },
+  "SyncPopup/SyncPanel/ScrollContainer/SyncVBoxContainer/ProgressHBoxContainer/SyncProgressBar/#0/#0": {
+   "rect": [
+    310.0,
+    310.0,
+    0.0,
+    0.0
+   ],
+   "visible": false
+  },
+  "SyncPopup/SyncPanel/ScrollContainer/SyncVBoxContainer/ProgressHBoxContainer/SyncProgressBar/#1": {
+   "rect": [
+    310.0,
+    310.0,
+    1300.0,
+    32.0
    ],
    "visible": true
   },
@@ -48930,7 +49146,7 @@
     230.0,
     310.0,
     1460.0,
-    27.0
+    32.0
    ],
    "visible": false
   },
@@ -48939,7 +49155,34 @@
     310.0,
     310.0,
     1300.0,
-    27.0
+    32.0
+   ],
+   "visible": false
+  },
+  "SyncPopup/SyncPanel/ScrollContainer/SyncVBoxContainer/ProgressHBoxContainer/SyncProgressBar/#0": {
+   "rect": [
+    310.0,
+    310.0,
+    0.0,
+    32.0
+   ],
+   "visible": false
+  },
+  "SyncPopup/SyncPanel/ScrollContainer/SyncVBoxContainer/ProgressHBoxContainer/SyncProgressBar/#0/#0": {
+   "rect": [
+    310.0,
+    310.0,
+    0.0,
+    0.0
+   ],
+   "visible": false
+  },
+  "SyncPopup/SyncPanel/ScrollContainer/SyncVBoxContainer/ProgressHBoxContainer/SyncProgressBar/#1": {
+   "rect": [
+    310.0,
+    310.0,
+    1300.0,
+    32.0
    ],
    "visible": false
   },
@@ -53450,7 +53693,7 @@
     230.0,
     310.0,
     1460.0,
-    27.0
+    32.0
    ],
    "visible": false
   },
@@ -53459,7 +53702,34 @@
     310.0,
     310.0,
     1300.0,
-    27.0
+    32.0
+   ],
+   "visible": false
+  },
+  "SyncPopup/SyncPanel/ScrollContainer/SyncVBoxContainer/ProgressHBoxContainer/SyncProgressBar/#0": {
+   "rect": [
+    310.0,
+    310.0,
+    0.0,
+    32.0
+   ],
+   "visible": false
+  },
+  "SyncPopup/SyncPanel/ScrollContainer/SyncVBoxContainer/ProgressHBoxContainer/SyncProgressBar/#0/#0": {
+   "rect": [
+    310.0,
+    310.0,
+    0.0,
+    0.0
+   ],
+   "visible": false
+  },
+  "SyncPopup/SyncPanel/ScrollContainer/SyncVBoxContainer/ProgressHBoxContainer/SyncProgressBar/#1": {
+   "rect": [
+    310.0,
+    310.0,
+    1300.0,
+    32.0
    ],
    "visible": false
   },
diff --git a/tests/fakes/ui_tour.gd b/tests/fakes/ui_tour.gd
index 763d524..6c53177 100644
--- a/tests/fakes/ui_tour.gd
+++ b/tests/fakes/ui_tour.gd
@@ -18,7 +18,7 @@ const SONG_INFO: Dictionary = {
 	"SongNo": 0, "Soundtrack": "Chrono Trigger", "SoundtrackUuid": "soundtrack-0",
 	"Song": "Corridors of Time",
 }
-const SYNC_PROGRESS: Dictionary = {"progress": 40, "time_spent": "00:00:02"}
+const SYNC_PROGRESS: Dictionary = {"progress": 40, "time_spent": "00:02"}
 const SYNC_RESULT: Dictionary = {
 	"soundtracks_added": ["Terranigma", "Lufia II"],
 	"soundtracks_re_added": [],
@@ -26,7 +26,7 @@ const SYNC_RESULT: Dictionary = {
 	"soundtracks_changed_content": ["Chrono Trigger"],
 	"soundtracks_removed": ["Old Soundtrack"],
 	"catched_errors": [],
-	"total_time": "00:00:03",
+	"total_time": "00:03",
 }
 
 ## The server's version history, newest first.
diff --git a/tests/integration/test_scene_split.gd b/tests/integration/test_scene_split.gd
index 103b6c2..f820976 100644
--- a/tests/integration/test_scene_split.gd
+++ b/tests/integration/test_scene_split.gd
@@ -226,7 +226,7 @@ func test_click_on_top_bar_while_quiz_popup_is_open_only_closes_it() -> void:
 
 func test_sync_disables_quiz_buttons_until_finished() -> void:
 	_server.respond_bytes("/sync", PackedByteArray())
-	_server.respond_json("/sync/progress", {"progress": 10, "time_spent": "00:00:01"})
+	_server.respond_json("/sync/progress", {"progress": 10, "time_spent": "00:01"})
 	var sync_popup: BasePopup = _window.get_node("SyncPopup")
 
 	_top_bar_button("SyncButton").pressed.emit()
diff --git a/tests/integration/test_sync_popup.gd b/tests/integration/test_sync_popup.gd
index ba8bb25..47d4b16 100644
--- a/tests/integration/test_sync_popup.gd
+++ b/tests/integration/test_sync_popup.gd
@@ -10,6 +10,8 @@ var _window: Control
 func before_test() -> void:
 	_snapshot = AutoloadSnapshot.take([Settings])
 	Settings.currently_syncing = false
+	# The bar jumps to its values and the result shows at once
+	Settings.reduce_animations = true
 	_server = FakeHttpTransport.new().install()
 	_server.respond_bytes("/sync", PackedByteArray())
 	_runner = scene_runner("res://popups/SyncPopup.tscn")
@@ -38,7 +40,7 @@ func _empty_result() -> Dictionary:
 		"soundtracks_changed_content": [],
 		"soundtracks_removed": [],
 		"catched_errors": [],
-		"total_time": "00:00:03",
+		"total_time": "00:03",
 	}
 
 
@@ -64,12 +66,29 @@ func test_start_sync_does_nothing_while_already_syncing() -> void:
 
 func test_progress_updates_progress_bar() -> void:
 	_runner.invoke("start_sync")
-	_server.respond_json("/sync/progress", {"progress": "42", "time_spent": "00:00:12"})
+	_server.respond_json("/sync/progress", {"progress": "42", "time_spent": "00:12"})
 
 	_runner.invoke("_on_sync_timeout")
 
 	assert_float(_node("SyncProgressBar").value).is_equal(42.0)
-	assert_str(_node("SyncTime").text).is_equal("00:00:12")
+	assert_str(_node("SyncTime").text).is_equal("00:12")
+
+
+func test_finished_sync_fills_the_bar_before_the_result() -> void:
+	Settings.reduce_animations = false
+	_runner.invoke("start_sync")
+	var bar: AnimatedProgressBar = _node("SyncProgressBar")
+	assert_bool(bar.indeterminate).is_true()
+
+	_finish_sync(_empty_result())
+
+	assert_bool(_node("ProgressHBoxContainer").visible).is_true()
+	await await_millis(int(Anim.SLOW * 1000) + 100)
+	assert_float(bar.value).is_equal(100.0)
+	assert_bool(_node("ProgressHBoxContainer").visible).is_true()
+	await await_millis(int(Anim.SLOW * 1000) + 100)
+	assert_bool(_node("ProgressHBoxContainer").visible).is_false()
+	assert_str(_node("SyncTitleLabel").text).is_equal("Sync Result")
 
 
 func test_finished_sync_shows_only_sections_with_changes() -> void:
@@ -88,7 +107,7 @@ func test_finished_sync_shows_only_sections_with_changes() -> void:
 	assert_bool(_node("NoChangesLabel").visible).is_false()
 	# Header plus one label per soundtrack
 	assert_int(_node("SoundtracksAddedVBox").get_child_count()).is_equal(3)
-	assert_str(_node("SyncTime").text).is_equal("Total time: 00:00:03")
+	assert_str(_node("SyncTime").text).is_equal("Total time: 00:03")
 	assert_bool(Settings.currently_syncing).is_false()
 	await assert_signal(_window).is_emitted("sync_finished")
 
diff --git a/tests/integration/test_theme.gd b/tests/integration/test_theme.gd
index ba96892..bce3a18 100644
--- a/tests/integration/test_theme.gd
+++ b/tests/integration/test_theme.gd
@@ -48,6 +48,9 @@ const STYLES: Dictionary = {
 	"PlayerTime": "Label",
 	"PlayerIcon": "Button",
 	"UpdateButton": "Button",
+	"SyncProgressBar": "ProgressBar",
+	"SyncProgressBarFill": "Panel",
+	"SyncProgressBarText": "Label",
 	"ProgressSlider": "HSlider",
 	"VolumeBar": "HSlider",
 	"StatisticsCard": "PanelContainer",
@@ -67,6 +70,7 @@ const STYLES: Dictionary = {
 ## Theme types that only scripts read from, so they are not styles a node can pick.
 const CODE_ONLY_TYPES: Dictionary = {
 	"Palette": ["backdrop", "first_point", "match_point", "flash"],
+	"SyncProgressBar": ["shine"],
 	"ScoreGraph": [
 		"player_1", "player_2", "player_3", "player_4", "player_5", "player_6", "player_7",
 		"grid", "axis_text", "winning_line",
diff --git a/tests/unit/test_animated_progress_bar.gd b/tests/unit/test_animated_progress_bar.gd
new file mode 100644
index 0000000..6bc33f5
--- /dev/null
+++ b/tests/unit/test_animated_progress_bar.gd
@@ -0,0 +1,88 @@
+extends GdUnitTestSuite
+## The sync popup's progress bar: busy until there is progress, gliding to new values,
+## a highlight on the filled part, and plain jumps with Reduce animations.
+
+var _runner: GdUnitSceneRunner
+var _bar: AnimatedProgressBar
+var _reduce_before: bool
+
+
+func before_test() -> void:
+	_reduce_before = Settings.reduce_animations
+	Settings.reduce_animations = false
+	var holder: Control = auto_free(Control.new())
+	holder.size = Vector2(1000, 100)
+	_bar = AnimatedProgressBar.new()
+	_bar.theme_type_variation = &"SyncProgressBar"
+	_bar.size = Vector2(1000, 32)
+	holder.add_child(_bar)
+	_runner = scene_runner(holder)
+	await _runner.simulate_frames(1)
+
+
+func after_test() -> void:
+	Settings.reduce_animations = _reduce_before
+
+
+func _label() -> Label:
+	return _bar.get_child(1) as Label
+
+
+func test_waits_with_the_busy_animation() -> void:
+	_bar.wait()
+
+	assert_bool(_bar.indeterminate).is_true()
+	assert_str(_label().text).is_empty()
+
+
+func test_progress_ends_the_wait_and_glides() -> void:
+	_bar.wait()
+
+	_bar.move_to(40)
+
+	assert_bool(_bar.indeterminate).is_false()
+	assert_float(_bar.value).is_less(40.0)
+	await await_millis(int(Anim.SLOW * 1000) + 150)
+	assert_float(_bar.value).is_equal(40.0)
+	assert_str(_label().text).is_equal("40%")
+
+
+func test_reduce_animations_jumps_and_never_waits() -> void:
+	Settings.reduce_animations = true
+
+	_bar.wait()
+	assert_bool(_bar.indeterminate).is_false()
+	_bar.move_to(75)
+
+	assert_float(_bar.value).is_equal(75.0)
+	assert_str(_label().text).is_equal("75%")
+
+
+func test_highlight_stays_on_the_filled_part() -> void:
+	Settings.reduce_animations = true
+	_bar.move_to(50)
+	Settings.reduce_animations = false
+	await _runner.simulate_frames(3)
+
+	var mask: Control = _bar.get_child(0)
+	assert_bool(mask.visible).is_true()
+	assert_float(mask.size.x).is_equal(_bar.fill_width())
+	assert_float(_bar.fill_width()).is_between(490.0, 510.0)
+
+
+func test_no_highlight_without_progress_or_animations() -> void:
+	await _runner.simulate_frames(2)
+	assert_bool((_bar.get_child(0) as Control).visible).is_false()
+
+	Settings.reduce_animations = true
+	_bar.move_to(50)
+	await _runner.simulate_frames(2)
+	assert_bool((_bar.get_child(0) as Control).visible).is_false()
+
+
+func test_highlight_takes_the_themes_colour() -> void:
+	var shine: TextureRect = _bar.get_child(0).get_child(0)
+	var gradient: Gradient = (shine.texture as GradientTexture2D).gradient
+
+	assert_object(gradient.get_color(1)).is_equal(_bar.get_theme_color(&"shine"))
+	assert_float(gradient.get_color(0).a).is_equal(0.0)
diff --git a/tests/unit/test_animated_progress_bar.gd.uid b/tests/unit/test_animated_progress_bar.gd.uid
new file mode 100644
index 0000000..062a204
--- /dev/null
+++ b/tests/unit/test_animated_progress_bar.gd.uid
@@ -0,0 +1 @@
+uid://bgb6no4urwpc7
diff --git a/tests/unit/test_api_types.gd b/tests/unit/test_api_types.gd
index 12027fc..d29b33c 100644
--- a/tests/unit/test_api_types.gd
+++ b/tests/unit/test_api_types.gd
@@ -118,7 +118,7 @@ func test_sync_response() -> void:
 		"soundtracks_added": ["Terranigma"], "soundtracks_re_added": [],
 		"soundtracks_changed_title": {"FF6": "Final Fantasy VI"},
 		"soundtracks_changed_content": ["Chrono Trigger"], "soundtracks_removed": ["Old"],
-		"catched_errors": ["Could not read x.mp3"], "total_time": "00:00:03"}"""))
+		"catched_errors": ["Could not read x.mp3"], "total_time": "00:03"}"""))
 
 	assert_array(result.soundtracks_added).contains_exactly(["Terranigma"])
 	assert_array(result.soundtracks_re_added).is_empty()
@@ -126,15 +126,15 @@ func test_sync_response() -> void:
 	assert_array(result.soundtracks_changed_content).contains_exactly(["Chrono Trigger"])
 	assert_array(result.soundtracks_removed).contains_exactly(["Old"])
 	assert_array(result.catched_errors).contains_exactly(["Could not read x.mp3"])
-	assert_str(result.total_time).is_equal("00:00:03")
+	assert_str(result.total_time).is_equal("00:03")
 
 
 func test_progress_response() -> void:
 	var progress: ProgressResponse = ProgressResponse.from_dict(_parse("""{
-		"progress": "40", "time_spent": "00:00:02"}"""))
+		"progress": "40", "time_spent": "00:02"}"""))
 
 	assert_str(progress.progress).is_equal("40")
-	assert_str(progress.time_spent).is_equal("00:00:02")
+	assert_str(progress.time_spent).is_equal("00:02")
 
 
 func test_version_data() -> void:
diff --git a/themes/christmas_theme.tres b/themes/christmas_theme.tres
index 27c644c..c5636ee 100644
--- a/themes/christmas_theme.tres
+++ b/themes/christmas_theme.tres
@@ -1248,6 +1248,30 @@ corner_radius_bottom_right = 8
 corner_radius_bottom_left = 8
 corner_detail = 8
 
+[sub_resource type="StyleBoxFlat" id="StyleBoxFlat_sync_track"]
+content_margin_left = 2.0
+content_margin_top = 2.0
+content_margin_right = 2.0
+content_margin_bottom = 2.0
+bg_color = Color(0.478, 0.082, 0.125, 0.7)
+corner_radius_top_left = 10
+corner_radius_top_right = 10
+corner_radius_bottom_right = 10
+corner_radius_bottom_left = 10
+corner_detail = 8
+
+[sub_resource type="StyleBoxFlat" id="StyleBoxFlat_sync_fill"]
+content_margin_left = 2.0
+content_margin_top = 2.0
+content_margin_right = 2.0
+content_margin_bottom = 2.0
+bg_color = Color(0.204, 0.553, 0.290, 1.0)
+corner_radius_top_left = 10
+corner_radius_top_right = 10
+corner_radius_bottom_right = 10
+corner_radius_bottom_left = 10
+corner_detail = 8
+
 [resource]
 default_font = ExtResource("1_default_font")
 Button/colors/font_color = Color(0.478, 0.082, 0.125, 1.0)
@@ -1456,6 +1480,21 @@ ProgressBar/constants/outline_size = 0
 ProgressBar/font_sizes/font_size = 16
 ProgressBar/styles/background = SubResource("StyleBoxFlat_07kyi")
 ProgressBar/styles/fill = SubResource("StyleBoxFlat_ouuwv")
+SyncProgressBar/base_type = &"ProgressBar"
+SyncProgressBar/colors/font_color = Color(1, 1, 1, 1)
+SyncProgressBar/colors/font_outline_color = Color(0, 0, 0, 0.45)
+SyncProgressBar/colors/shine = Color(0.949, 0.843, 0.478, 0.9)
+SyncProgressBar/constants/outline_size = 4
+SyncProgressBar/font_sizes/font_size = 18
+SyncProgressBar/styles/background = SubResource("StyleBoxFlat_sync_track")
+SyncProgressBar/styles/fill = SubResource("StyleBoxFlat_sync_fill")
+SyncProgressBarFill/base_type = &"Panel"
+SyncProgressBarFill/styles/panel = SubResource("StyleBoxFlat_sync_fill")
+SyncProgressBarText/base_type = &"Label"
+SyncProgressBarText/colors/font_color = Color(1, 1, 1, 1)
+SyncProgressBarText/colors/font_outline_color = Color(0, 0, 0, 0.45)
+SyncProgressBarText/constants/outline_size = 4
+SyncProgressBarText/font_sizes/font_size = 18
 ScoreGraph/colors/axis_text = Color(0.965, 0.925, 0.878, 1.0)
 ScoreGraph/colors/grid = Color(0.992, 0.980, 0.953, 0.1)
 ScoreGraph/colors/player_1 = Color(0.992, 0.980, 0.953, 1.0)
diff --git a/themes/main_theme.tres b/themes/main_theme.tres
index 979497f..cb328e5 100644
--- a/themes/main_theme.tres
+++ b/themes/main_theme.tres
@@ -1056,6 +1056,30 @@ corner_radius_bottom_right = 8
 corner_radius_bottom_left = 8
 corner_detail = 8
 
+[sub_resource type="StyleBoxFlat" id="StyleBoxFlat_sync_track"]
+content_margin_left = 2.0
+content_margin_top = 2.0
+content_margin_right = 2.0
+content_margin_bottom = 2.0
+bg_color = Color(0.1, 0.1, 0.1, 0.55)
+corner_radius_top_left = 6
+corner_radius_top_right = 6
+corner_radius_bottom_right = 6
+corner_radius_bottom_left = 6
+corner_detail = 8
+
+[sub_resource type="StyleBoxFlat" id="StyleBoxFlat_sync_fill"]
+content_margin_left = 2.0
+content_margin_top = 2.0
+content_margin_right = 2.0
+content_margin_bottom = 2.0
+bg_color = Color(1, 0.5, 0, 1)
+corner_radius_top_left = 6
+corner_radius_top_right = 6
+corner_radius_bottom_right = 6
+corner_radius_bottom_left = 6
+corner_detail = 8
+
 [resource]
 default_font = ExtResource("1_default_font")
 Button/colors/font_color = Color(0.875, 0.875, 0.875, 1)
@@ -1264,6 +1288,21 @@ ProgressBar/constants/outline_size = 0
 ProgressBar/font_sizes/font_size = 16
 ProgressBar/styles/background = SubResource("StyleBoxFlat_07kyi")
 ProgressBar/styles/fill = SubResource("StyleBoxFlat_ouuwv")
+SyncProgressBar/base_type = &"ProgressBar"
+SyncProgressBar/colors/font_color = Color(1, 1, 1, 1)
+SyncProgressBar/colors/font_outline_color = Color(0, 0, 0, 0.55)
+SyncProgressBar/colors/shine = Color(1, 0.86, 0.6, 0.8)
+SyncProgressBar/constants/outline_size = 4
+SyncProgressBar/font_sizes/font_size = 18
+SyncProgressBar/styles/background = SubResource("StyleBoxFlat_sync_track")
+SyncProgressBar/styles/fill = SubResource("StyleBoxFlat_sync_fill")
+SyncProgressBarFill/base_type = &"Panel"
+SyncProgressBarFill/styles/panel = SubResource("StyleBoxFlat_sync_fill")
+SyncProgressBarText/base_type = &"Label"
+SyncProgressBarText/colors/font_color = Color(1, 1, 1, 1)
+SyncProgressBarText/colors/font_outline_color = Color(0, 0, 0, 0.55)
+SyncProgressBarText/constants/outline_size = 4
+SyncProgressBarText/font_sizes/font_size = 18
 ScoreGraph/colors/axis_text = Color(0.75, 0.75, 0.75, 1)
 ScoreGraph/colors/grid = Color(1, 1, 1, 0.1)
 ScoreGraph/colors/player_1 = Color(0.25, 0.56, 0.95, 1)
diff --git a/themes/nord_theme.tres b/themes/nord_theme.tres
index 0ce23c1..ba5459e 100644
--- a/themes/nord_theme.tres
+++ b/themes/nord_theme.tres
@@ -1231,6 +1231,30 @@ corner_radius_bottom_right = 8
 corner_radius_bottom_left = 8
 corner_detail = 8
 
+[sub_resource type="StyleBoxFlat" id="StyleBoxFlat_sync_track"]
+content_margin_left = 2.0
+content_margin_top = 2.0
+content_margin_right = 2.0
+content_margin_bottom = 2.0
+bg_color = Color(0.118, 0.290, 0.412, 0.7)
+corner_radius_top_left = 10
+corner_radius_top_right = 10
+corner_radius_bottom_right = 10
+corner_radius_bottom_left = 10
+corner_detail = 8
+
+[sub_resource type="StyleBoxFlat" id="StyleBoxFlat_sync_fill"]
+content_margin_left = 2.0
+content_margin_top = 2.0
+content_margin_right = 2.0
+content_margin_bottom = 2.0
+bg_color = Color(0.533, 0.753, 0.816, 1.0)
+corner_radius_top_left = 10
+corner_radius_top_right = 10
+corner_radius_bottom_right = 10
+corner_radius_bottom_left = 10
+corner_detail = 8
+
 [resource]
 default_font = ExtResource("1_default_font")
 Button/colors/font_color = Color(0.925, 0.937, 0.957, 1.0)
@@ -1439,6 +1463,21 @@ ProgressBar/constants/outline_size = 0
 ProgressBar/font_sizes/font_size = 16
 ProgressBar/styles/background = SubResource("StyleBoxFlat_07kyi")
 ProgressBar/styles/fill = SubResource("StyleBoxFlat_ouuwv")
+SyncProgressBar/base_type = &"ProgressBar"
+SyncProgressBar/colors/font_color = Color(0.925, 0.937, 0.957, 1.0)
+SyncProgressBar/colors/font_outline_color = Color(0.180, 0.204, 0.251, 0.8)
+SyncProgressBar/colors/shine = Color(0.925, 0.937, 0.957, 0.85)
+SyncProgressBar/constants/outline_size = 4
+SyncProgressBar/font_sizes/font_size = 18
+SyncProgressBar/styles/background = SubResource("StyleBoxFlat_sync_track")
+SyncProgressBar/styles/fill = SubResource("StyleBoxFlat_sync_fill")
+SyncProgressBarFill/base_type = &"Panel"
+SyncProgressBarFill/styles/panel = SubResource("StyleBoxFlat_sync_fill")
+SyncProgressBarText/base_type = &"Label"
+SyncProgressBarText/colors/font_color = Color(0.925, 0.937, 0.957, 1.0)
+SyncProgressBarText/colors/font_outline_color = Color(0.180, 0.204, 0.251, 0.8)
+SyncProgressBarText/constants/outline_size = 4
+SyncProgressBarText/font_sizes/font_size = 18
 ScoreGraph/colors/axis_text = Color(0.847, 0.871, 0.914, 1.0)
 ScoreGraph/colors/grid = Color(0.925, 0.937, 0.957, 0.1)
 ScoreGraph/colors/player_1 = Color(0.533, 0.753, 0.816, 1.0)
diff --git a/themes/original_web_theme.tres b/themes/original_web_theme.tres
index 3b88699..0cfa708 100644
--- a/themes/original_web_theme.tres
+++ b/themes/original_web_theme.tres
@@ -1157,6 +1157,30 @@ corner_radius_bottom_right = 8
 corner_radius_bottom_left = 8
 corner_detail = 8
 
+[sub_resource type="StyleBoxFlat" id="StyleBoxFlat_sync_track"]
+content_margin_left = 2.0
+content_margin_top = 2.0
+content_margin_right = 2.0
+content_margin_bottom = 2.0
+bg_color = Color(0.86, 0.86, 0.86, 1)
+corner_radius_top_left = 6
+corner_radius_top_right = 6
+corner_radius_bottom_right = 6
+corner_radius_bottom_left = 6
+corner_detail = 8
+
+[sub_resource type="StyleBoxFlat" id="StyleBoxFlat_sync_fill"]
+content_margin_left = 2.0
+content_margin_top = 2.0
+content_margin_right = 2.0
+content_margin_bottom = 2.0
+bg_color = Color(1, 0.612, 0, 1)
+corner_radius_top_left = 6
+corner_radius_top_right = 6
+corner_radius_bottom_right = 6
+corner_radius_bottom_left = 6
+corner_detail = 8
+
 [resource]
 default_font = ExtResource("1_default_font")
 Button/colors/font_color = Color(1, 0.612, 0, 1)
@@ -1365,6 +1389,21 @@ ProgressBar/constants/outline_size = 0
 ProgressBar/font_sizes/font_size = 16
 ProgressBar/styles/background = SubResource("StyleBoxFlat_07kyi")
 ProgressBar/styles/fill = SubResource("StyleBoxFlat_ouuwv")
+SyncProgressBar/base_type = &"ProgressBar"
+SyncProgressBar/colors/font_color = Color(1, 1, 1, 1)
+SyncProgressBar/colors/font_outline_color = Color(0, 0, 0, 0.45)
+SyncProgressBar/colors/shine = Color(1, 1, 1, 0.7)
+SyncProgressBar/constants/outline_size = 4
+SyncProgressBar/font_sizes/font_size = 18
+SyncProgressBar/styles/background = SubResource("StyleBoxFlat_sync_track")
+SyncProgressBar/styles/fill = SubResource("StyleBoxFlat_sync_fill")
+SyncProgressBarFill/base_type = &"Panel"
+SyncProgressBarFill/styles/panel = SubResource("StyleBoxFlat_sync_fill")
+SyncProgressBarText/base_type = &"Label"
+SyncProgressBarText/colors/font_color = Color(1, 1, 1, 1)
+SyncProgressBarText/colors/font_outline_color = Color(0, 0, 0, 0.45)
+SyncProgressBarText/constants/outline_size = 4
+SyncProgressBarText/font_sizes/font_size = 18
 ScoreGraph/colors/axis_text = Color(0.75, 0.75, 0.75, 1)
 ScoreGraph/colors/grid = Color(1, 1, 1, 0.1)
 ScoreGraph/colors/player_1 = Color(0.25, 0.56, 0.95, 1)