fix(Loading): remove extra padding on loading spinners (#7447)

Co-authored-by: Alessandra Davila <[email protected]> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
carbon-design-system · Dec 14, 2020 · 2bb2cc7 · 2bb2cc7
1 parent b0ecf07
commit 2bb2cc7
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 20 deletions.
diff --git a/packages/components/src/components/file-uploader/_file-uploader.scss b/packages/components/src/components/file-uploader/_file-uploader.scss
@@ -139,12 +139,6 @@
       margin: 0;
     }
 
-    .#{$prefix}--loading {
-      width: rem(32px);
-      height: rem(32px);
-      margin-right: -$carbon--spacing-03;
-    }
-
     .#{$prefix}--inline-loading__animation .#{$prefix}--loading {
       // Vanilla markup has `.bx--inline-loading__animation` which is used for `margin-right` adjustment
       margin-right: 0;

diff --git a/packages/components/src/components/loading/_loading.scss b/packages/components/src/components/loading/_loading.scss
@@ -30,7 +30,7 @@
   }
 
   .#{$prefix}--loading__svg circle {
-    stroke-width: 8;
+    stroke-width: 10;
     stroke-linecap: butt;
     stroke-dasharray: 240;
   }
@@ -49,10 +49,11 @@
   }
 
   .#{$prefix}--loading--small {
-    width: 2rem;
-    height: 2rem;
+    width: rem(16px);
+    height: rem(16px);
+
     circle {
-      stroke-width: 12;
+      stroke-width: 16;
     }
   }
 
@@ -62,7 +63,7 @@
 
   .#{$prefix}--loading__background {
     stroke: $ui-03;
-    stroke-dashoffset: 0;
+    stroke-dashoffset: -22;
   }
 
   .#{$prefix}--loading-overlay {

diff --git a/packages/components/src/components/loading/_vars.scss b/packages/components/src/components/loading/_vars.scss
@@ -8,14 +8,14 @@
 /// @type Number
 /// @access private
 /// @group loading
-$loading__gap: 40;
+$loading__gap: 16;
 
 /// @type Number
 /// @access private
 /// @group loading
-$loading--small__gap: 99;
+$loading--small__gap: 25;
 
 /// @type Number
 /// @access private
 /// @group loading
-$loading__size: 10.5rem;
+$loading__size: 5.5rem;
diff --git a/packages/react/src/components/Loading/Loading.js b/packages/react/src/components/Loading/Loading.js
@@ -34,7 +34,7 @@ function Loading({
     [`${prefix}--loading-overlay--stop`]: !active,
   });
   const loadingId = id || `loading-id-${instanceId}`;
-  const spinnerRadius = small ? '26.8125' : '37.5';
+  const spinnerRadius = small ? '42' : '44';
 
   const loading = (
     <div
@@ -46,20 +46,20 @@ function Loading({
       <label id={loadingId} className={`${prefix}--visually-hidden`}>
         {description}
       </label>
-      <svg className={`${prefix}--loading__svg`} viewBox="-75 -75 150 150">
+      <svg className={`${prefix}--loading__svg`} viewBox="0 0 100 100">
         <title>{description}</title>
         {small ? (
           <circle
             className={`${prefix}--loading__background`}
-            cx="0"
-            cy="0"
+            cx="50%"
+            cy="50%"
             r={spinnerRadius}
           />
         ) : null}
         <circle
           className={`${prefix}--loading__stroke`}
-          cx="0"
-          cy="0"
+          cx="50%"
+          cy="50%"
           r={spinnerRadius}
         />
       </svg>