Fix scaling

Author: lachlanjc

packages/components/src/Spinner.tsx

@@ -23,7 +23,7 @@ export const Spinner: ForwardRef<SVGSVGElement, SpinnerProps> =
       size = 48,
       strokeWidth = 4,
       max = 1,
-      title = 'Loading…',
+      title = 'Loading',
       duration = 750,
       ...props
     },
@@ -37,7 +37,7 @@ export const Spinner: ForwardRef<SVGSVGElement, SpinnerProps> =
     const svgProps = {
       strokeWidth,
 
-      viewBox: `0 0 ${size} ${size}`,
+      viewBox: '0 0 32 32',
       width: size,
       height: size,
 
@@ -46,13 +46,11 @@ export const Spinner: ForwardRef<SVGSVGElement, SpinnerProps> =
       role: 'img',
     }
 
-    const radius = size / 2 - strokeWidth
-    const center = radius + strokeWidth
     const circleProps = {
       strokeWidth,
-      r: radius,
-      cx: radius + strokeWidth,
-      cy: radius + strokeWidth,
+      r: 16 - strokeWidth,
+      cx: 16,
+      cy: 16,
       fill: 'none',
     }
 
@@ -66,13 +64,13 @@ export const Spinner: ForwardRef<SVGSVGElement, SpinnerProps> =
       >
         <title>{title}</title>
         <circle {...circleProps} opacity={1 / 8} />
-        <circle {...circleProps} strokeDasharray="20 180">
+        <circle {...circleProps} strokeDasharray="20 110">
           <animateTransform
             attributeName="transform"
             attributeType="XML"
             type="rotate"
-            from={`0 ${center} ${center}`}
-            to={`360 ${center} ${center}`}
+            from="0 16 16"
+            to="360 16 16"
             dur={`${duration}ms`}
             repeatCount="indefinite"
           />

packages/components/test/__snapshots__/index.tsx.snap

@@ -1329,22 +1329,6 @@ exports[`Slider renders 1`] = `
 `;
 
 exports[`Spinner renders 1`] = `
-@keyframes animation-0 {
-  from {
-    -webkit-transform: rotate(0deg);
-    -moz-transform: rotate(0deg);
-    -ms-transform: rotate(0deg);
-    transform: rotate(0deg);
-  }
-
-  to {
-    -webkit-transform: rotate(360deg);
-    -moz-transform: rotate(360deg);
-    -ms-transform: rotate(360deg);
-    transform: rotate(360deg);
-  }
-}
-
 .emotion-0 {
   box-sizing: border-box;
   margin: 0;
@@ -1353,21 +1337,6 @@ exports[`Spinner renders 1`] = `
   overflow: visible;
 }
 
-.emotion-1 {
-  box-sizing: border-box;
-  margin: 0;
-  min-width: 0;
-  transform-origin: 50% 50%;
-  -webkit-animation-name: animation-0;
-  animation-name: animation-0;
-  -webkit-animation-timing-function: linear;
-  animation-timing-function: linear;
-  -webkit-animation-duration: 500ms;
-  animation-duration: 500ms;
-  -webkit-animation-iteration-count: infinite;
-  animation-iteration-count: infinite;
-}
-
 <svg
   className="emotion-0"
   fill="none"
@@ -1379,22 +1348,34 @@ exports[`Spinner renders 1`] = `
   width={48}
 >
   <title>
-    Loading...
+    Loading
   </title>
   <circle
     cx={16}
     cy={16}
+    fill="none"
     opacity={0.125}
     r={12}
+    strokeWidth={4}
   />
   <circle
-    className="emotion-1"
     cx={16}
     cy={16}
+    fill="none"
     r={12}
-    strokeDasharray={75.39822368615503}
-    strokeDashoffset={56.548667764616276}
-  />
+    strokeDasharray="20 110"
+    strokeWidth={4}
+  >
+    <animateTransform
+      attributeName="transform"
+      attributeType="XML"
+      dur="750ms"
+      from="0 16 16"
+      repeatCount="indefinite"
+      to="360 16 16"
+      type="rotate"
+    />
+  </circle>
 </svg>
 `;
 

packages/docs/src/pages/components/spinner.mdx

@@ -19,12 +19,13 @@ import { Spinner } from 'theme-ui'
 | Name          | Type   | Description                                      |
 | ------------- | ------ | ------------------------------------------------ |
 | `title`       | String | (default `'loading'`) Text for SVG `<title>` tag |
-| `size`        | Number | (default `48`) chart diameter                    |
+| `size`        | Number | (default `48`) indicator diameter                |
 | `strokeWidth` | Number | (default `4`) stroke width                       |
+| `duration`    | Number | (default `750`) duration of animation in ms      |
 
-A `title` attribute should be provided to the component for accessibility purposes.
-The element uses `role='img'` by default.
-Pass any overrides or additional attributes for the SVG element as props.
+A `title` attribute should be provided to the component for accessibility
+purposes. The element uses `role='img'` by default. Pass any overrides or
+additional attributes for the SVG element as props.
 
 ## Variants