fix(kit): Skeleton fix for ProgressCircle (#9507)

Co-authored-by: taiga-family-bot <[email protected]>
taiga-family · Oct 16, 2024 · 2598626 · 2598626
1 parent 2549418
commit 2598626
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 0 deletions.
diff --git a/projects/demo/src/modules/directives/skeleton/examples/1/index.html b/projects/demo/src/modules/directives/skeleton/examples/1/index.html
@@ -39,6 +39,31 @@ <h2 tuiHeader>
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna
     aliqua.
 </section>
+<p>
+    <tui-progress-circle
+        [tuiSkeleton]="skeleton"
+        [value]="0.33"
+    />
+    <tui-avatar-stack>
+        <tui-avatar
+            src="AI"
+            [tuiSkeleton]="skeleton"
+        />
+        <tui-avatar
+            src="https://avatars.githubusercontent.com/u/11832552"
+            [tuiSkeleton]="skeleton"
+        />
+        <tui-avatar
+            src="❤️"
+            [tuiSkeleton]="skeleton"
+        />
+        <tui-avatar
+            appearance="primary"
+            src="$"
+            [tuiSkeleton]="skeleton"
+        />
+    </tui-avatar-stack>
+</p>
 <p>
     <button
         tuiButton

diff --git a/projects/demo/src/modules/directives/skeleton/examples/1/index.ts b/projects/demo/src/modules/directives/skeleton/examples/1/index.ts
@@ -5,8 +5,10 @@ import {encapsulation} from '@demo/emulate/encapsulation';
 import {TuiAppearance, TuiButton, TuiLabel, TuiOption, TuiTitle} from '@taiga-ui/core';
 import {
     TuiAvatar,
+    TuiAvatarStack,
     TuiBadge,
     TuiChip,
+    TuiProgressCircle,
     TuiSkeleton,
     TuiStep,
     TuiSwitch,
@@ -19,13 +21,15 @@ import {TuiCardLarge, TuiHeader} from '@taiga-ui/layout';
         FormsModule,
         TuiAppearance,
         TuiAvatar,
+        TuiAvatarStack,
         TuiBadge,
         TuiButton,
         TuiCardLarge,
         TuiChip,
         TuiHeader,
         TuiLabel,
         TuiOption,
+        TuiProgressCircle,
         TuiSkeleton,
         TuiStep,
         TuiSwitch,

diff --git a/projects/kit/components/progress/progress-circle/progress-circle.style.less b/projects/kit/components/progress/progress-circle/progress-circle.style.less
@@ -25,6 +25,12 @@
     font-size: 1rem; // to use em units inside svg (Safari doesn't support rem units inside svg)
     inline-size: var(--t-diameter);
     block-size: var(--t-diameter);
+    border-radius: 100%;
+    mask: radial-gradient(
+        closest-side,
+        transparent calc(100% - var(--t-track-stroke)),
+        #000 calc(100% - var(--t-track-stroke) + 0.5px)
+    );
 
     &[data-size='xxs'] {
         --t-diameter: @diameter[xxs];