diff --git a/src/lib/skeleton.tsx b/src/lib/skeleton.tsx
index 905f8a4..fa0f6c3 100644
--- a/src/lib/skeleton.tsx
+++ b/src/lib/skeleton.tsx
@@ -90,7 +90,6 @@ export const useSkeleton = () => {
     const observer = new ResizeObserver((entries) => {
       const rect = ref.getBoundingClientRect()
       ref.style.setProperty("--skeleton-left", `${rect.left}px`)
-      ref.style.setProperty("--skeleton-top", `${rect.top}px`)
       for (let entry of entries) {
         const width = entry.contentRect.width
         ref.style.setProperty("--skeleton-width", `${width}px`)
diff --git a/src/skeleton.css b/src/skeleton.css
index c834490..f71ad5d 100644
--- a/src/skeleton.css
+++ b/src/skeleton.css
@@ -1,6 +1,6 @@
 .react-loading-skeleton {
   --base-color: #ebebeb;
-  --highlight-color: red;
+  --highlight-color: #f5f5f5;
   --highlight-size: 40px;
   --pseudo-element-display: block; /* Enable animation */
 
@@ -31,7 +31,7 @@
   );
   transform: translateX(
     calc(
-      var(--skeleton-window-width) * calc(var(--skeleton-percentage) / 100)
+      (var(--skeleton-window-width) + var(--highlight-size)) * calc(var(--skeleton-percentage) / 100) - var(--skeleton-left)
     )
   );
 }