Custom highlight background

Author: srmagura

assets/custom-highlight-background.png

@@ -18,6 +18,8 @@ function styleOptionsToCssProperties({
   direction,
   duration,
   enableAnimation = defaultEnableAnimation,
+
+  customHighlightBackground,
 }: SkeletonStyleProps & { circle: boolean }): CSSProperties &
   Record<`--${string}`, string> {
   const style: ReturnType<typeof styleOptionsToCssProperties> = {};
@@ -41,6 +43,9 @@ function styleOptionsToCssProperties({
   if (typeof highlightColor !== 'undefined')
     style['--highlight-color'] = highlightColor;
 
+  if (typeof customHighlightBackground === 'string')
+    style['--custom-highlight-background'] = customHighlightBackground;
+
   return style;
 }
 

src/Skeleton.tsx

@@ -10,4 +10,6 @@ export interface SkeletonStyleProps {
   duration?: number;
   direction?: 'ltr' | 'rtl';
   enableAnimation?: boolean;
+
+  customHighlightBackground?: string;
 }

src/SkeletonStyleProps.ts

@@ -427,3 +427,34 @@ export const PrefersReducedMotion = () => (
     />
   </div>
 );
+
+export const HighlightWidth = () => (
+  <div style={{ width: 500 }}>
+    <p>Default</p>
+    <Skeleton
+      highlightColor="#E0B0FF"
+      customHighlightBackground="linear-gradient(90deg, var(--base-color) 0%, var(--highlight-color) 50%, var(--base-color) 100%)"
+    />
+    <br />
+
+    <p>Narrow highlight</p>
+    <Skeleton
+      highlightColor="#E0B0FF"
+      customHighlightBackground="linear-gradient(90deg, var(--base-color) 40%, var(--highlight-color) 50%, var(--base-color) 60%)"
+    />
+    <br />
+
+    <p>Wide highlight</p>
+    <Skeleton
+      highlightColor="#E0B0FF"
+      customHighlightBackground="linear-gradient(90deg, var(--base-color) 0%, var(--highlight-color) 5%, var(--highlight-color) 95%, var(--base-color) 100%)"
+    />
+    <br />
+
+    <p>Fun gradient</p>
+    <Skeleton
+      highlightColor="#E0B0FF"
+      customHighlightBackground="linear-gradient(90deg, var(--base-color) 0%, rgba(131,58,180,1) 25%, rgba(253,29,29,1) 50%, rgba(252,176,69,1) 75%, var(--base-color) 100%)"
+    />
+  </div>
+);

src/__stories__/Skeleton.stories.tsx

@@ -32,11 +32,14 @@
   right: 0;
   height: 100%;
   background-repeat: no-repeat;
-  background-image: linear-gradient(
-    90deg,
-    var(--base-color),
-    var(--highlight-color),
-    var(--base-color)
+  background-image: var(
+    --custom-highlight-background,
+    linear-gradient(
+      90deg,
+      var(--base-color) 0%,
+      var(--highlight-color) 50%,
+      var(--base-color) 100%
+    )
   );
   transform: translateX(-100%);