round progress indicators (not quite spec but closer)

KTibow · Jan 19, 2024 · 7d1afa6 · 7d1afa6
1 parent 0b654cd
commit 7d1afa6
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 11 deletions.
diff --git a/src/lib/forms/CircularProgress.svelte b/src/lib/forms/CircularProgress.svelte
@@ -21,6 +21,7 @@
     stroke="rgb(var(--m3-scheme-primary))"
     stroke-width="4"
     stroke-dasharray="125.66 125.66"
+    stroke-linecap="round"
     fill="none"
   />
 </svg>

diff --git a/src/lib/forms/CircularProgressIndeterminate.svelte b/src/lib/forms/CircularProgressIndeterminate.svelte
@@ -19,6 +19,7 @@
     stroke="rgb(var(--m3-scheme-primary))"
     stroke-width="4"
     stroke-dasharray="125.66 125.66"
+    stroke-linecap="round"
     fill="none"
   />
 </svg>

diff --git a/src/lib/forms/LinearProgress.svelte b/src/lib/forms/LinearProgress.svelte
@@ -11,21 +11,19 @@
 
 <style>
   :root {
-    --m3-linear-progress-track-shape: var(--m3-util-rounding-none);
-    --m3-linear-progress-indicator-shape: var(--m3-util-rounding-none);
+    --m3-linear-progress-shape: var(--m3-util-rounding-full);
   }
   .m3-container {
-    background-color: rgb(var(--m3-scheme-surface-container-highest));
+    background-color: rgb(var(--m3-scheme-primary-container));
     height: 0.25rem;
     min-width: 8rem;
-    position: relative;
     overflow: hidden;
-    border-radius: var(--m3-linear-progress-track-shape);
+    border-radius: var(--m3-linear-progress-shape);
   }
   .percent {
     background-color: rgb(var(--m3-scheme-primary));
     transition: all 200ms;
-    border-radius: var(--m3-linear-progress-indicator-shape);
+    border-radius: var(--m3-linear-progress-shape);
   }
 
   .m3-container {

diff --git a/src/lib/forms/LinearProgressIndeterminate.svelte b/src/lib/forms/LinearProgressIndeterminate.svelte
@@ -10,21 +10,20 @@
 
 <style>
   :root {
-    --m3-linear-progress-track-shape: var(--m3-util-rounding-none);
-    --m3-linear-progress-indicator-shape: var(--m3-util-rounding-none);
+    --m3-linear-progress-shape: var(--m3-util-rounding-full);
   }
   .m3-container {
-    background-color: rgb(var(--m3-scheme-surface-container-highest));
+    background-color: rgb(var(--m3-scheme-primary-container));
     height: 0.25rem;
     min-width: 8rem;
     position: relative;
     overflow: hidden;
-    border-radius: var(--m3-linear-progress-track-shape);
+    border-radius: var(--m3-linear-progress-shape);
   }
   .percent {
     background-color: rgb(var(--m3-scheme-primary));
     animation: progress infinite 1.5s ease-out;
-    border-radius: var(--m3-linear-progress-indicator-shape);
+    border-radius: var(--m3-linear-progress-shape);
     width: 50%;
     top: 0;
     bottom: 0;