From e9e8724d46de9e401af7219f2f9aba74eabd0c14 Mon Sep 17 00:00:00 2001
From: Zhang Dian <54255897+zdpcdt@users.noreply.github.com>
Date: Sun, 15 Mar 2026 03:35:09 +0800
Subject: [PATCH] Refactor ProgressBar styles for improved layout and animation
 (#750)

* refactor: refactor ProgressBar styles for improved layout and animation.

* fix: set MinHeight for ProgressBar text part.

* chore: remove useless Progress resources.
---
 src/Semi.Avalonia/Controls/ProgressBar.axaml  | 393 ++++++++----------
 .../Themes/Dark/ProgressBar.axaml             |   1 -
 .../Themes/HighContrast/ProgressBar.axaml     |   1 -
 .../Themes/Light/ProgressBar.axaml            |   1 -
 4 files changed, 183 insertions(+), 213 deletions(-)

diff --git a/src/Semi.Avalonia/Controls/ProgressBar.axaml b/src/Semi.Avalonia/Controls/ProgressBar.axaml
index 148ded0..2a42b74 100644
--- a/src/Semi.Avalonia/Controls/ProgressBar.axaml
+++ b/src/Semi.Avalonia/Controls/ProgressBar.axaml
@@ -4,87 +4,54 @@
     xmlns:semi="https://irihi.tech/semi"
     xmlns:converters="using:Avalonia.Controls.Converters">
     <Design.PreviewWith>
-        <StackPanel Margin="20" Spacing="20">
-            <ProgressBar
-                Width="200"
-                Maximum="100"
-                Minimum="0"
-                ShowProgressText="True"
-                Value="20" />
-            <ProgressBar
-                Width="200"
-                IsIndeterminate="True"
-                Maximum="100"
-                Minimum="0"
-                ShowProgressText="True"
-                Value="20" />
-            <ProgressBar
-                Width="200"
-                Classes="Left"
-                IsIndeterminate="True"
-                Maximum="100"
-                Minimum="0"
-                ShowProgressText="True"
-                Value="20" />
-            <ProgressBar
-                Width="200"
-                Classes="Left"
-                Maximum="100"
-                Minimum="0"
-                ShowProgressText="True"
-                Value="20" />
-            <ProgressBar
-                Width="200"
-                Classes="Right"
-                Maximum="100"
-                Minimum="0"
-                ShowProgressText="True"
-                Value="20" />
-            <StackPanel
-                HorizontalAlignment="Left"
-                Orientation="Horizontal"
-                Spacing="20">
-                <ProgressBar
-                    Classes="Left"
-                    Maximum="100"
-                    Minimum="0"
-                    Orientation="Vertical"
-                    ShowProgressText="True"
-                    Value="20" />
-                <ProgressBar
-                    Classes="Right"
-                    Maximum="100"
-                    Minimum="0"
-                    Orientation="Vertical"
-                    ShowProgressText="True"
-                    Value="20" />
-                <ProgressBar
-                    Maximum="100"
-                    Minimum="0"
-                    Orientation="Vertical"
-                    ShowProgressText="True"
-                    Value="20" />
-                <ProgressBar
-                    Classes="Left"
-                    Maximum="100"
-                    Minimum="0"
-                    Orientation="Vertical"
-                    ShowProgressText="False"
-                    Value="20" />
-                <ProgressBar
-                    IsIndeterminate="True"
-                    Maximum="100"
-                    Minimum="0"
-                    Orientation="Vertical"
-                    ShowProgressText="True"
-                    Value="20" />
-                <ProgressBar
-                    IsIndeterminate="True"
-                    Maximum="100"
-                    Minimum="0"
-                    Orientation="Vertical"
-                    ShowProgressText="False"
-                    Value="20" />
+        <StackPanel Width="400" Margin="20">
+            <ProgressBar />
+            <ProgressBar Value="20" />
+            <ProgressBar Value="50" Classes="Success" />
+            <ProgressBar Value="80" Classes="Warning" />
+            <ProgressBar Value="100" Classes="Error" />
+            <ProgressBar ShowProgressText="True" />
+            <ProgressBar Value="20" ShowProgressText="True" />
+            <ProgressBar Value="50" Classes="Success" ShowProgressText="True" />
+            <ProgressBar Value="80" Classes="Warning" ShowProgressText="True" />
+            <ProgressBar Value="100" Classes="Error" ShowProgressText="True" />
+            <ProgressBar Classes="Left" ShowProgressText="True" />
+            <ProgressBar Value="20" Classes="Left" ShowProgressText="True" />
+            <ProgressBar Value="50" Classes="Left Success" ShowProgressText="True" />
+            <ProgressBar Value="80" Classes="Left Warning" ShowProgressText="True" />
+            <ProgressBar Value="100" Classes="Left Error" ShowProgressText="True" />
+            <ProgressBar Classes="Right" ShowProgressText="True" />
+            <ProgressBar Value="20" Classes="Right" ShowProgressText="True" />
+            <ProgressBar Value="50" Classes="Right Success" ShowProgressText="True" />
+            <ProgressBar Value="80" Classes="Right Warning" ShowProgressText="True" />
+            <ProgressBar Value="100" Classes="Right Error" ShowProgressText="True" />
+
+            <StackPanel Orientation="Horizontal">
+                <StackPanel.Styles>
+                    <Style Selector="ProgressBar">
+                        <Setter Property="Orientation" Value="Vertical" />
+                    </Style>
+                </StackPanel.Styles>
+                <ProgressBar />
+                <ProgressBar Value="20" />
+                <ProgressBar Value="50" Classes="Success" />
+                <ProgressBar Value="80" Classes="Warning" />
+                <ProgressBar Value="100" Classes="Error" />
+                <ProgressBar ShowProgressText="True" />
+                <ProgressBar Value="20" ShowProgressText="True" />
+                <ProgressBar Value="50" Classes="Success" ShowProgressText="True" />
+                <ProgressBar Value="80" Classes="Warning" ShowProgressText="True" />
+                <ProgressBar Value="100" Classes="Error" ShowProgressText="True" />
+                <ProgressBar Classes="Top" ShowProgressText="True" />
+                <ProgressBar Value="20" Classes="Top" ShowProgressText="True" />
+                <ProgressBar Value="50" Classes="Top Success" ShowProgressText="True" />
+                <ProgressBar Value="80" Classes="Top Warning" ShowProgressText="True" />
+                <ProgressBar Value="100" Classes="Top Error" ShowProgressText="True" />
+                <ProgressBar Classes="Bottom" ShowProgressText="True" />
+                <ProgressBar Value="20" Classes="Bottom" ShowProgressText="True" />
+                <ProgressBar Value="50" Classes="Bottom Success" ShowProgressText="True" />
+                <ProgressBar Value="80" Classes="Bottom Warning" ShowProgressText="True" />
+                <ProgressBar Value="100" Classes="Bottom Error" ShowProgressText="True" />
             </StackPanel>
         </StackPanel>
     </Design.PreviewWith>
@@ -115,7 +82,7 @@
                             <Panel Name="DeterminateRoot" Opacity="1">
                                 <Panel.Transitions>
                                     <Transitions>
-                                        <DoubleTransition Property="Opacity" Duration="0:0:0.197" />
+                                        <DoubleTransition Property="Opacity" Duration="0:0:0.2" />
                                     </Transitions>
                                 </Panel.Transitions>
                                 <Border
@@ -127,7 +94,7 @@
                             <Panel Name="IndeterminateRoot" Opacity="0">
                                 <Panel.Transitions>
                                     <Transitions>
-                                        <DoubleTransition Property="Opacity" Duration="0:0:0.197" />
+                                        <DoubleTransition Property="Opacity" Duration="0:0:0.2" />
                                     </Transitions>
                                 </Panel.Transitions>
                                 <Border
@@ -158,7 +125,7 @@
                             <TextBlock.Text>
                                 <MultiBinding Converter="{StaticResource StringFormatConverter}">
                                     <TemplateBinding Property="ProgressTextFormat" />
-                                    <Binding Path="Value" RelativeSource="{RelativeSource TemplatedParent}" />
+                                    <TemplateBinding Property="Value" />
                                     <TemplateBinding Property="Percentage" />
                                     <TemplateBinding Property="Minimum" />
                                     <TemplateBinding Property="Maximum" />
@@ -191,149 +158,155 @@
         <Style Selector="^.Error">
             <Setter Property="Foreground" Value="{DynamicResource ProgressBarErrorForeground}" />
         </Style>
-        <Style Selector="^:horizontal /template/ Border#PART_Indicator">
-            <Setter Property="HorizontalAlignment" Value="Left" />
-            <Setter Property="VerticalAlignment" Value="Stretch" />
-        </Style>
-        <Style Selector="^:vertical /template/ Border#PART_Indicator">
-            <Setter Property="HorizontalAlignment" Value="Stretch" />
-            <Setter Property="VerticalAlignment" Value="Top" />
-        </Style>
+
         <Style Selector="^:horizontal">
             <Setter Property="MinWidth" Value="200" />
             <Setter Property="MinHeight" Value="4" />
+            <Style Selector="^ /template/ Border#PART_Indicator">
+                <Setter Property="HorizontalAlignment" Value="Left" />
+            </Style>
+            <Style Selector="^ /template/ Border#IndeterminateProgressBarIndicator">
+                <Setter Property="Width" Value="{Binding $parent[ProgressBar].TemplateSettings.ContainerWidth}" />
+            </Style>
+            <Style Selector="^ /template/ Border#IndeterminateProgressBarIndicator2">
+                <Setter Property="Width" Value="{Binding $parent[ProgressBar].TemplateSettings.Container2Width}" />
+            </Style>
+
+            <Style Selector="^.Left,^.Top">
+                <Style Selector="^ /template/ LayoutTransformControl#PART_LayoutTransformControl">
+                    <Setter Property="Grid.Column" Value="0" />
+                    <Setter Property="Grid.Row" Value="1" />
+                    <Setter Property="Margin" Value="0 0 16 0" />
+                    <Setter Property="MinWidth" Value="45" />
+                </Style>
+                <Style Selector="^ /template/ Border#ProgressBarRoot">
+                    <Setter Property="MinHeight" Value="4" />
+                    <Setter Property="VerticalAlignment" Value="Center" />
+                </Style>
+            </Style>
+            <Style Selector="^.Right,^.Bottom">
+                <Style Selector="^ /template/ LayoutTransformControl#PART_LayoutTransformControl">
+                    <Setter Property="Grid.Column" Value="2" />
+                    <Setter Property="Grid.Row" Value="1" />
+                    <Setter Property="Margin" Value="16 0 0 0" />
+                    <Setter Property="MinWidth" Value="45" />
+                </Style>
+                <Style Selector="^ /template/ Border#ProgressBarRoot">
+                    <Setter Property="MinHeight" Value="4" />
+                    <Setter Property="VerticalAlignment" Value="Center" />
+                </Style>
+            </Style>
         </Style>
+
         <Style Selector="^:vertical">
+            <Style Selector="^ /template/ LayoutTransformControl#PART_LayoutTransformControl">
+                <Setter Property="LayoutTransform">
+                    <RotateTransform Angle="90" />
+                </Setter>
+            </Style>
             <Setter Property="MinWidth" Value="4" />
             <Setter Property="MinHeight" Value="200" />
-        </Style>
-        <Style Selector="^:vertical /template/ LayoutTransformControl#PART_LayoutTransformControl">
-            <Setter Property="LayoutTransform">
-                <RotateTransform Angle="90" />
-            </Setter>
-        </Style>
-        <Style Selector="^:indeterminate /template/ Panel#DeterminateRoot">
-            <Setter Property="Opacity" Value="0" />
-        </Style>
-        <Style Selector="^:indeterminate /template/ Panel#IndeterminateRoot">
-            <Setter Property="Opacity" Value="1" />
-        </Style>
-        <Style Selector="^:horizontal:indeterminate /template/ Border#IndeterminateProgressBarIndicator">
-            <Style.Animations>
-                <Animation IterationCount="Infinite" Duration="0:0:2">
-                    <KeyFrame KeySpline="0.4,0,0.6,1" KeyTime="0:0:0">
-                        <Setter Property="TranslateTransform.X" Value="{Binding $parent[ProgressBar].TemplateSettings.ContainerAnimationStartPosition}" />
-                    </KeyFrame>
-                    <KeyFrame KeySpline="0.4,0,0.6,1" KeyTime="0:0:1.5">
-                        <Setter Property="TranslateTransform.X" Value="{Binding $parent[ProgressBar].TemplateSettings.ContainerAnimationEndPosition}" />
-                    </KeyFrame>
-                    <KeyFrame KeySpline="0.4,0,0.6,1" KeyTime="0:0:2">
-                        <Setter Property="TranslateTransform.X" Value="{Binding $parent[ProgressBar].TemplateSettings.ContainerAnimationEndPosition}" />
-                    </KeyFrame>
-                </Animation>
-            </Style.Animations>
-        </Style>
-        <Style Selector="^:horizontal:indeterminate /template/ Border#IndeterminateProgressBarIndicator2">
-            <Style.Animations>
-                <Animation IterationCount="Infinite" Duration="0:0:2">
-                    <KeyFrame KeySpline="0.4,0,0.6,1" KeyTime="0:0:0">
-                        <Setter Property="TranslateTransform.X" Value="{Binding $parent[ProgressBar].TemplateSettings.Container2AnimationStartPosition}" />
-                    </KeyFrame>
-                    <KeyFrame KeySpline="0.4,0,0.6,1" KeyTime="0:0:0.75">
-                        <Setter Property="TranslateTransform.X" Value="{Binding $parent[ProgressBar].TemplateSettings.Container2AnimationStartPosition}" />
-                    </KeyFrame>
-                    <KeyFrame KeySpline="0.4,0,0.6,1" KeyTime="0:0:2">
-                        <Setter Property="TranslateTransform.X" Value="{Binding $parent[ProgressBar].TemplateSettings.Container2AnimationEndPosition}" />
-                    </KeyFrame>
-                </Animation>
-            </Style.Animations>
-        </Style>
-        <Style Selector="^:vertical:indeterminate /template/ Border#IndeterminateProgressBarIndicator">
-            <Style.Animations>
-                <Animation IterationCount="Infinite" Duration="0:0:2">
-                    <KeyFrame KeySpline="0.4,0,0.6,1" KeyTime="0:0:0">
-                        <Setter Property="TranslateTransform.Y" Value="{Binding $parent[ProgressBar].TemplateSettings.ContainerAnimationStartPosition}" />
-                    </KeyFrame>
-                    <KeyFrame KeySpline="0.4,0,0.6,1" KeyTime="0:0:1.5">
-                        <Setter Property="TranslateTransform.Y" Value="{Binding $parent[ProgressBar].TemplateSettings.ContainerAnimationEndPosition}" />
-                    </KeyFrame>
-                    <KeyFrame KeySpline="0.4,0,0.6,1" KeyTime="0:0:2">
-                        <Setter Property="TranslateTransform.Y" Value="{Binding $parent[ProgressBar].TemplateSettings.ContainerAnimationEndPosition}" />
-                    </KeyFrame>
-                </Animation>
-            </Style.Animations>
-        </Style>
-        <Style Selector="^:vertical:indeterminate /template/ Border#IndeterminateProgressBarIndicator2">
-            <Style.Animations>
-                <Animation IterationCount="Infinite" Duration="0:0:2">
-                    <KeyFrame KeySpline="0.4,0,0.6,1" KeyTime="0:0:0">
-                        <Setter Property="TranslateTransform.Y" Value="{Binding $parent[ProgressBar].TemplateSettings.Container2AnimationStartPosition}" />
-                    </KeyFrame>
-                    <KeyFrame KeySpline="0.4,0,0.6,1" KeyTime="0:0:0.75">
-                        <Setter Property="TranslateTransform.Y" Value="{Binding $parent[ProgressBar].TemplateSettings.Container2AnimationStartPosition}" />
-                    </KeyFrame>
-                    <KeyFrame KeySpline="0.4,0,0.6,1" KeyTime="0:0:2">
-                        <Setter Property="TranslateTransform.Y" Value="{Binding $parent[ProgressBar].TemplateSettings.Container2AnimationEndPosition}" />
-                    </KeyFrame>
-                </Animation>
-            </Style.Animations>
-        </Style>
-        <Style Selector="^:horizontal /template/ Border#IndeterminateProgressBarIndicator">
-            <Setter Property="Width" Value="{Binding $parent[ProgressBar].TemplateSettings.ContainerWidth}" />
-        </Style>
-        <Style Selector="^:horizontal /template/ Border#IndeterminateProgressBarIndicator2">
-            <Setter Property="Width" Value="{Binding $parent[ProgressBar].TemplateSettings.Container2Width}" />
-        </Style>
-        <Style Selector="^:vertical /template/ Border#IndeterminateProgressBarIndicator">
-            <Setter Property="Height" Value="{Binding $parent[ProgressBar].TemplateSettings.ContainerWidth}" />
-        </Style>
-        <Style Selector="^:vertical /template/ Border#IndeterminateProgressBarIndicator2">
-            <Setter Property="Height" Value="{Binding $parent[ProgressBar].TemplateSettings.Container2Width}" />
-        </Style>
-        <Style Selector="^.Left">
-            <Style Selector="^:horizontal /template/ LayoutTransformControl#PART_LayoutTransformControl">
-                <Setter Property="Grid.Column" Value="0" />
-                <Setter Property="Grid.Row" Value="1" />
-                <Setter Property="Margin" Value="4 0" />
+            <Style Selector="^ /template/ Border#PART_Indicator">
+                <Setter Property="VerticalAlignment" Value="Top" />
             </Style>
-            <Style Selector="^:vertical /template/ LayoutTransformControl#PART_LayoutTransformControl">
-                <Setter Property="Grid.Column" Value="1" />
-                <Setter Property="Grid.Row" Value="0" />
-                <Setter Property="Margin" Value="0 4" />
+            <Style Selector="^ /template/ Border#IndeterminateProgressBarIndicator">
+                <Setter Property="Height" Value="{Binding $parent[ProgressBar].TemplateSettings.ContainerWidth}" />
             </Style>
-            <Style Selector="^:horizontal /template/ Border#ProgressBarRoot">
-                <Setter Property="MinHeight" Value="4" />
-                <Setter Property="VerticalAlignment" Value="Center" />
+            <Style Selector="^ /template/ Border#IndeterminateProgressBarIndicator2">
+                <Setter Property="Height" Value="{Binding $parent[ProgressBar].TemplateSettings.Container2Width}" />
             </Style>
-            <Style Selector="^:vertical /template/ Border#ProgressBarRoot">
-                <Setter Property="MinWidth" Value="4" />
-                <Setter Property="HorizontalAlignment" Value="Center" />
+            <Style Selector="^.Left,^.Top">
+                <Style Selector="^ /template/ LayoutTransformControl#PART_LayoutTransformControl">
+                    <Setter Property="Grid.Column" Value="1" />
+                    <Setter Property="Grid.Row" Value="0" />
+                    <Setter Property="Margin" Value="0 0 0 16" />
+                    <Setter Property="MinHeight" Value="45" />
+                </Style>
+                <Style Selector="^ /template/ Border#ProgressBarRoot">
+                    <Setter Property="MinWidth" Value="4" />
+                    <Setter Property="HorizontalAlignment" Value="Center" />
+                </Style>
             </Style>
-            <Style Selector="^ /template/ TextBlock#PART_ProgressText">
-                <Setter Property="Foreground" Value="{DynamicResource ProgressBarOuterTextForeground}" />
+            <Style Selector="^.Right,^.Bottom">
+                <Style Selector="^ /template/ LayoutTransformControl#PART_LayoutTransformControl">
+                    <Setter Property="Grid.Column" Value="1" />
+                    <Setter Property="Grid.Row" Value="2" />
+                    <Setter Property="Margin" Value="0 16 0 0" />
+                    <Setter Property="MinHeight" Value="45" />
+                </Style>
+                <Style Selector="^ /template/ Border#ProgressBarRoot">
+                    <Setter Property="MinWidth" Value="4" />
+                    <Setter Property="HorizontalAlignment" Value="Center" />
+                </Style>
             </Style>
         </Style>
-        <Style Selector="^.Right">
-            <Style Selector="^:horizontal /template/ LayoutTransformControl#PART_LayoutTransformControl">
-                <Setter Property="Grid.Column" Value="2" />
-                <Setter Property="Grid.Row" Value="1" />
-                <Setter Property="Margin" Value="4 0" />
+
+        <Style Selector="^:indeterminate">
+            <Style Selector="^ /template/ Panel#DeterminateRoot">
+                <Setter Property="Opacity" Value="0" />
             </Style>
-            <Style Selector="^:vertical /template/ LayoutTransformControl#PART_LayoutTransformControl">
-                <Setter Property="Grid.Column" Value="1" />
-                <Setter Property="Grid.Row" Value="2" />
-                <Setter Property="Margin" Value="0 4" />
+            <Style Selector="^ /template/ Panel#IndeterminateRoot">
+                <Setter Property="Opacity" Value="1" />
             </Style>
-            <Style Selector="^:horizontal /template/ Border#ProgressBarRoot">
-                <Setter Property="MinHeight" Value="4" />
-                <Setter Property="VerticalAlignment" Value="Center" />
+            <Style Selector="^:horizontal /template/ Border#IndeterminateProgressBarIndicator">
+                <Style.Animations>
+                    <Animation IterationCount="Infinite" Duration="0:0:2">
+                        <KeyFrame KeySpline="0.4,0,0.6,1" KeyTime="0:0:0">
+                            <Setter Property="TranslateTransform.X" Value="{Binding $parent[ProgressBar].TemplateSettings.ContainerAnimationStartPosition}" />
+                        </KeyFrame>
+                        <KeyFrame KeySpline="0.4,0,0.6,1" KeyTime="0:0:1.5">
+                            <Setter Property="TranslateTransform.X" Value="{Binding $parent[ProgressBar].TemplateSettings.ContainerAnimationEndPosition}" />
+                        </KeyFrame>
+                        <KeyFrame KeySpline="0.4,0,0.6,1" KeyTime="0:0:2">
+                            <Setter Property="TranslateTransform.X" Value="{Binding $parent[ProgressBar].TemplateSettings.ContainerAnimationEndPosition}" />
+                        </KeyFrame>
+                    </Animation>
+                </Style.Animations>
             </Style>
-            <Style Selector="^:vertical /template/ Border#ProgressBarRoot">
-                <Setter Property="MinWidth" Value="4" />
-                <Setter Property="HorizontalAlignment" Value="Center" />
+            <Style Selector="^:horizontal /template/ Border#IndeterminateProgressBarIndicator2">
+                <Style.Animations>
+                    <Animation IterationCount="Infinite" Duration="0:0:2">
+                        <KeyFrame KeySpline="0.4,0,0.6,1" KeyTime="0:0:0">
+                            <Setter Property="TranslateTransform.X" Value="{Binding $parent[ProgressBar].TemplateSettings.Container2AnimationStartPosition}" />
+                        </KeyFrame>
+                        <KeyFrame KeySpline="0.4,0,0.6,1" KeyTime="0:0:0.75">
+                            <Setter Property="TranslateTransform.X" Value="{Binding $parent[ProgressBar].TemplateSettings.Container2AnimationStartPosition}" />
+                        </KeyFrame>
+                        <KeyFrame KeySpline="0.4,0,0.6,1" KeyTime="0:0:2">
+                            <Setter Property="TranslateTransform.X" Value="{Binding $parent[ProgressBar].TemplateSettings.Container2AnimationEndPosition}" />
+                        </KeyFrame>
+                    </Animation>
+                </Style.Animations>
             </Style>
-            <Style Selector="^ /template/ TextBlock#PART_ProgressText">
-                <Setter Property="Foreground" Value="{DynamicResource ProgressBarOuterTextForeground}" />
+            <Style Selector="^:vertical /template/ Border#IndeterminateProgressBarIndicator">
+                <Style.Animations>
+                    <Animation IterationCount="Infinite" Duration="0:0:2">
+                        <KeyFrame KeySpline="0.4,0,0.6,1" KeyTime="0:0:0">
+                            <Setter Property="TranslateTransform.Y" Value="{Binding $parent[ProgressBar].TemplateSettings.ContainerAnimationStartPosition}" />
+                        </KeyFrame>
+                        <KeyFrame KeySpline="0.4,0,0.6,1" KeyTime="0:0:1.5">
+                            <Setter Property="TranslateTransform.Y" Value="{Binding $parent[ProgressBar].TemplateSettings.ContainerAnimationEndPosition}" />
+                        </KeyFrame>
+                        <KeyFrame KeySpline="0.4,0,0.6,1" KeyTime="0:0:2">
+                            <Setter Property="TranslateTransform.Y" Value="{Binding $parent[ProgressBar].TemplateSettings.ContainerAnimationEndPosition}" />
+                        </KeyFrame>
+                    </Animation>
+                </Style.Animations>
+            </Style>
+            <Style Selector="^:vertical /template/ Border#IndeterminateProgressBarIndicator2">
+                <Style.Animations>
+                    <Animation IterationCount="Infinite" Duration="0:0:2">
+                        <KeyFrame KeySpline="0.4,0,0.6,1" KeyTime="0:0:0">
+                            <Setter Property="TranslateTransform.Y" Value="{Binding $parent[ProgressBar].TemplateSettings.Container2AnimationStartPosition}" />
+                        </KeyFrame>
+                        <KeyFrame KeySpline="0.4,0,0.6,1" KeyTime="0:0:0.75">
+                            <Setter Property="TranslateTransform.Y" Value="{Binding $parent[ProgressBar].TemplateSettings.Container2AnimationStartPosition}" />
+                        </KeyFrame>
+                        <KeyFrame KeySpline="0.4,0,0.6,1" KeyTime="0:0:2">
+                            <Setter Property="TranslateTransform.Y" Value="{Binding $parent[ProgressBar].TemplateSettings.Container2AnimationEndPosition}" />
+                        </KeyFrame>
+                    </Animation>
+                </Style.Animations>
             </Style>
         </Style>
     </ControlTheme>
diff --git a/src/Semi.Avalonia/Themes/Dark/ProgressBar.axaml b/src/Semi.Avalonia/Themes/Dark/ProgressBar.axaml
index a8885fd..7905267 100644
--- a/src/Semi.Avalonia/Themes/Dark/ProgressBar.axaml
+++ b/src/Semi.Avalonia/Themes/Dark/ProgressBar.axaml
@@ -2,7 +2,6 @@
     <StaticResource x:Key="ProgressBarIndicatorBrush" ResourceKey="SemiColorPrimary" />
     <StaticResource x:Key="ProgressBarBackground" ResourceKey="SemiColorFill0" />
     <StaticResource x:Key="ProgressBarTextForeground" ResourceKey="SemiColorText0" />
-    <StaticResource x:Key="ProgressBarOuterTextForeground" ResourceKey="SemiColorText0" />
     <SolidColorBrush x:Key="ProgressBarRootBorderBrush" Color="Transparent" />
     <StaticResource x:Key="ProgressBarPrimaryForeground" ResourceKey="SemiColorPrimary" />
     <StaticResource x:Key="ProgressBarSecondaryForeground" ResourceKey="SemiColorSecondary" />
diff --git a/src/Semi.Avalonia/Themes/HighContrast/ProgressBar.axaml b/src/Semi.Avalonia/Themes/HighContrast/ProgressBar.axaml
index f870f09..f4ec973 100644
--- a/src/Semi.Avalonia/Themes/HighContrast/ProgressBar.axaml
+++ b/src/Semi.Avalonia/Themes/HighContrast/ProgressBar.axaml
@@ -2,7 +2,6 @@
     <StaticResource x:Key="ProgressBarIndicatorBrush" ResourceKey="SemiColorHighlight" />
     <StaticResource x:Key="ProgressBarBackground" ResourceKey="SemiColorHighlightText" />
     <StaticResource x:Key="ProgressBarTextForeground" ResourceKey="SemiColorWindowText" />
-    <StaticResource x:Key="ProgressBarOuterTextForeground" ResourceKey="SemiColorWindowText" />
     <StaticResource x:Key="ProgressBarRootBorderBrush" ResourceKey="SemiColorWindowText" />
     <StaticResource x:Key="ProgressBarPrimaryForeground" ResourceKey="SemiColorHighlight" />
 </ResourceDictionary>
\ No newline at end of file
diff --git a/src/Semi.Avalonia/Themes/Light/ProgressBar.axaml b/src/Semi.Avalonia/Themes/Light/ProgressBar.axaml
index a8885fd..7905267 100644
--- a/src/Semi.Avalonia/Themes/Light/ProgressBar.axaml
+++ b/src/Semi.Avalonia/Themes/Light/ProgressBar.axaml
@@ -2,7 +2,6 @@
     <StaticResource x:Key="ProgressBarIndicatorBrush" ResourceKey="SemiColorPrimary" />
     <StaticResource x:Key="ProgressBarBackground" ResourceKey="SemiColorFill0" />
     <StaticResource x:Key="ProgressBarTextForeground" ResourceKey="SemiColorText0" />
-    <StaticResource x:Key="ProgressBarOuterTextForeground" ResourceKey="SemiColorText0" />
     <SolidColorBrush x:Key="ProgressBarRootBorderBrush" Color="Transparent" />
     <StaticResource x:Key="ProgressBarPrimaryForeground" ResourceKey="SemiColorPrimary" />
     <StaticResource x:Key="ProgressBarSecondaryForeground" ResourceKey="SemiColorSecondary" />