fix progress bar % value

Author: Kim-the-Diamond

packages/progress/resources/css/progress.css

@@ -1,31 +1,36 @@
 .progress-bar {
+    position: relative;
     height: 1rem;
     width: 100%;
     background-color: rgb(243 244 246);
     border-radius: 9999px;
-    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
     overflow: hidden;
+    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
 }
 
-.progress-bar-value {
-    display: flex;
+.progress-bar-fill {
     height: 100%;
-    align-items: center;
-    justify-content: center;
     background-color: var(--progress-color, var(--primary-500));
-    /* Uses config color, fallback to primary */
     border-radius: 9999px;
-    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+    transition: width 0.3s ease;
+}
+
+.progress-bar-text {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
     font-size: 0.75rem;
     font-weight: 700;
     color: white;
+    pointer-events: none;
 }
 
 .dark .progress-bar {
     background-color: rgb(31 41 55);
 }
 
-.dark .progress-bar-value {
+.dark .progress-bar-fill {
     background-color: var(--progress-color, var(--primary-400));
-    /* Uses config color, fallback to primary */
 }

packages/progress/resources/views/progress.blade.php

@@ -1,5 +1,4 @@
 <div class="progress-bar" style="--progress-color: {{ $getColor() }};">
-    <div class="progress-bar-value" style="width: {{ $getProgress() }}%;">
-        {{ $getFormattedState() }}
-    </div>
+    <div class="progress-bar-fill" style="width: {{ $getProgress() }}%;"></div>
+    <span class="progress-bar-text">{{ $getFormattedState() }}</span>
 </div>