diff --git a/packages/web/src/scss/components/Skeleton/_Skeleton.scss b/packages/web/src/scss/components/Skeleton/_Skeleton.scss
index a7d8225ed3..b5de291d46 100644
--- a/packages/web/src/scss/components/Skeleton/_Skeleton.scss
+++ b/packages/web/src/scss/components/Skeleton/_Skeleton.scss
@@ -37,21 +37,32 @@
 }
 
 .Skeleton__item {
+    position: relative;
     display: block;
     width: 100%;
-    background: theme.$background;
-    background-size: 400% 400%;
-    animation: skeleton-loading 2s ease infinite; // TODO: Animation to be determined
+    overflow: hidden;
+    background: theme.$item-background;
 
     &:not(:last-child) {
         margin-bottom: theme.$margin-bottom;
     }
+
+    &::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        background-image: theme.$item-gradient;
+        transform: translateX(-100%);
+        animation: skeleton-loading 1.5s infinite;
+    }
 }
 
 .Skeleton--shape .Skeleton__item {
     width: var(--#{tokens.$css-variable-prefix}skeleton-shape-width);
     height: var(--#{tokens.$css-variable-prefix}skeleton-shape-height);
-    object-fit: cover;
     border: 1px solid theme.$shape-border-color;
 
     @include responsive-properties.create-cascade(
@@ -73,11 +84,7 @@
 }
 
 @keyframes skeleton-loading {
-    0% {
-        background-position: 100% 50%;
-    }
-
     100% {
-        background-position: 0 50%;
+        transform: translateX(100%);
     }
 }
diff --git a/packages/web/src/scss/components/Skeleton/_theme.scss b/packages/web/src/scss/components/Skeleton/_theme.scss
index 78c1bf3742..fec2684aff 100644
--- a/packages/web/src/scss/components/Skeleton/_theme.scss
+++ b/packages/web/src/scss/components/Skeleton/_theme.scss
@@ -2,7 +2,8 @@
 @use 'tools';
 
 $margin-bottom: tokens.$space-400;
-$background: linear-gradient(94.81deg, #ececec 0%, #fff 48.5%, #ececec 100%); // TODO:  update to tokens
+$item-gradient: linear-gradient(94.81deg, #ececec 0%, #fff 48.5%, #ececec 100%); // TODO:  update to tokens
+$item-background: #ececec; // TODO:  update to tokens
 $breakpoints: tokens.$breakpoints;
 
 $typography-border-radius: tokens.$radius-300;
diff --git a/packages/web/src/scss/components/Skeleton/index.html b/packages/web/src/scss/components/Skeleton/index.html
index 3996ab27ba..1874889c65 100644
--- a/packages/web/src/scss/components/Skeleton/index.html
+++ b/packages/web/src/scss/components/Skeleton/index.html
@@ -15,13 +15,13 @@ <h2 class="docs-Heading">Body</h2>
             <h3 class="docs-Heading">Size {{size}}</h3>
             <div style="width: 100%">
 
-              <div class="Skeleton Skeleton--text Skeleton--{{size}} mb-900" aria-busy="true" aria-live="polite">
+              <div class="Skeleton Skeleton--text Skeleton--{{size}} mb-900">
                 <div class="Skeleton__item" aria-hidden="true"></div>
                 <div class="Skeleton__item" aria-hidden="true"></div>
                 <div class="Skeleton__item" aria-hidden="true"></div>
               </div>
 
-              <div class="Skeleton Skeleton--text Skeleton--{{size}}" aria-busy="true" aria-live="polite">
+              <div class="Skeleton Skeleton--text Skeleton--{{size}}">
                 <div class="Skeleton__item" aria-hidden="true"></div>
                 <div class="Skeleton__item" aria-hidden="true"></div>
               </div>
@@ -48,7 +48,7 @@ <h2 class="docs-Heading">Heading</h2>
             <h3 class="docs-Heading">Size {{size}}</h3>
             <div style="width: 100%">
 
-              <div class="Skeleton Skeleton--heading Skeleton--{{size}}" aria-busy="true" aria-live="polite">
+              <div class="Skeleton Skeleton--heading Skeleton--{{size}}">
                 <div class="Skeleton__item" aria-hidden="true"></div>
                 <div class="Skeleton__item" aria-hidden="true"></div>
                 <div class="Skeleton__item" aria-hidden="true"></div>
@@ -64,58 +64,6 @@ <h3 class="docs-Heading">Size {{size}}</h3>
   </div>
 </section>
 
-
-<section class="UNSTABLE_Section">
-  <div class="Container">
-    <div class="docs-Stack docs-Stack--stretch">
-      <h2 class="docs-Heading">Shape Image</h2>
-      <div class="Grid Grid--cols-1 Grid--tablet--cols-2 Grid--desktop--cols-3">
-
-        <section class="UNSTABLE_Section">
-          <div class="docs-Stack docs-Stack--start">
-            <h3 class="docs-Heading">Image Square</h3>
-            <div class="Skeleton Skeleton--shape" aria-busy="true" aria-live="polite">
-              <img
-                src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" width="100"
-                height="100" alt="Loading" class="Skeleton__item"
-                style="--spirit-skeleton-shape-width: 100px;--spirit-skeleton-shape-height: 100px"
-              >
-            </div>
-          </div>
-        </section>
-
-        <section class="UNSTABLE_Section">
-          <div class="docs-Stack docs-Stack--start">
-            <h3 class="docs-Heading">Image Circle</h3>
-            <div class="Skeleton Skeleton--shape" aria-busy="true" aria-live="polite">
-              <img
-                src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" width="100"
-                height="100" alt="Loading" class="Skeleton__item"
-                style="--spirit-skeleton-shape-width: 100px;--spirit-skeleton-shape-height: 100px;--spirit-skeleton-shape-radius: var(--spirit-radius-full)"
-              >
-            </div>
-          </div>
-        </section>
-
-        <section class="UNSTABLE_Section">
-          <div class="docs-Stack docs-Stack--start">
-            <h3 class="docs-Heading">Image Rectangular</h3>
-            <div class="Skeleton Skeleton--shape" aria-busy="true" aria-live="polite">
-              <img
-                src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" width="100"
-                height="100" alt="Loading" class="Skeleton__item"
-                style="--spirit-skeleton-shape-width: 300px;--spirit-skeleton-shape-height: 100px; --spirit-skeleton-shape-radius: var(--spirit-radius-400)"
-              >
-            </div>
-          </div>
-        </section>
-
-      </div>
-    </div>
-  </div>
-</section>
-
-
 <section class="UNSTABLE_Section">
   <div class="Container">
     <div class="docs-Stack docs-Stack--stretch">
@@ -125,7 +73,7 @@ <h3 class="docs-Heading">Image Rectangular</h3>
           <div class="docs-Stack docs-Stack--start">
             <h3 class="docs-Heading">Shape Square</h3>
 
-            <div class="Skeleton Skeleton--shape" aria-busy="true" aria-live="polite">
+            <div class="Skeleton Skeleton--shape">
               <div
                 class="Skeleton__item"
                 style="--spirit-skeleton-shape-width: 100px; --spirit-skeleton-shape-height: 100px"
@@ -138,7 +86,7 @@ <h3 class="docs-Heading">Shape Square</h3>
           <div class="docs-Stack docs-Stack--start">
             <h3 class="docs-Heading">Shape Circle</h3>
 
-            <div class="Skeleton Skeleton--shape" aria-busy="true" aria-live="polite">
+            <div class="Skeleton Skeleton--shape">
               <div
                 class="Skeleton__item"
                 style="--spirit-skeleton-shape-width: 100px; --spirit-skeleton-shape-height: 100px; --spirit-skeleton-shape-radius: var(--spirit-radius-full)"
@@ -150,7 +98,7 @@ <h3 class="docs-Heading">Shape Circle</h3>
         <section class="UNSTABLE_Section">
           <div class="docs-Stack docs-Stack--start">
             <h3 class="docs-Heading">Shape Rectangular</h3>
-            <div class="Skeleton Skeleton--shape" aria-busy="true" aria-live="polite">
+            <div class="Skeleton Skeleton--shape">
               <div
                 class="Skeleton__item "
                 style="--spirit-skeleton-shape-width: 300px; --spirit-skeleton-shape-height: 100px; --spirit-skeleton-shape-radius: var(--spirit-radius-400)"
@@ -162,7 +110,7 @@ <h3 class="docs-Heading">Shape Rectangular</h3>
         <section class="UNSTABLE_Section">
           <div class="docs-Stack docs-Stack--start">
             <h3 class="docs-Heading">Shape Rectangular responsive radius</h3>
-            <div class="Skeleton Skeleton--shape" aria-busy="true" aria-live="polite">
+            <div class="Skeleton Skeleton--shape">
               <div
                 class="Skeleton__item"
                 style="
@@ -186,27 +134,29 @@ <h3 class="docs-Heading">Shape Rectangular responsive radius</h3>
   <div class="Container">
     <div class="docs-Stack docs-Stack--stretch">
       <h2 class="docs-Heading">Combinations</h2>
-      <div class="Grid Grid--cols-1 Grid--tablet--cols-2 Grid--desktop--cols-2">
-        <div class="GridItem">
-          <div class="Grid">
-            <div class="GridItem">
-              <div class="Skeleton Skeleton--shape" aria-busy="true" aria-live="polite">
-                <div
-                  class="Skeleton__item "
-                  style="--spirit-skeleton-shape-width: 100px; --spirit-skeleton-shape-height: 100px; --spirit-skeleton-shape-radius: var(--spirit-radius-full)"
-                ></div>
-              </div>
-            </div>
-            <div
-              class="GridItem"
-              style="--grid-item-column-start: 2; --grid-item-column-end: span 10;"
-            >
-              <div class="Skeleton Skeleton--heading Skeleton--small mb-900" aria-busy="true" aria-live="polite">
-                <div class="Skeleton__item" aria-hidden="true"></div>
+      <div aria-busy="true" aria-live="polite">
+        <div class="Grid Grid--cols-1 Grid--tablet--cols-2 Grid--desktop--cols-2">
+          <div class="GridItem">
+            <div class="Grid">
+              <div class="GridItem">
+                <div class="Skeleton Skeleton--shape">
+                  <div
+                    class="Skeleton__item "
+                    style="--spirit-skeleton-shape-width: 100px; --spirit-skeleton-shape-height: 100px; --spirit-skeleton-shape-radius: var(--spirit-radius-full)"
+                  ></div>
+                </div>
               </div>
-              <div class="Skeleton Skeleton--text Skeleton--small" aria-busy="true" aria-live="polite">
-                <div class="Skeleton__item" aria-hidden="true"></div>
-                <div class="Skeleton__item" aria-hidden="true"></div>
+              <div
+                class="GridItem"
+                style="--grid-item-column-start: 2; --grid-item-column-end: span 10;"
+              >
+                <div class="Skeleton Skeleton--heading Skeleton--small mb-900">
+                  <div class="Skeleton__item" aria-hidden="true"></div>
+                </div>
+                <div class="Skeleton Skeleton--text Skeleton--small">
+                  <div class="Skeleton__item" aria-hidden="true"></div>
+                  <div class="Skeleton__item" aria-hidden="true"></div>
+                </div>
               </div>
             </div>
           </div>