refactor: simplify spinner, use dynamic sizes

woly-ui · Jun 4, 2021 · af0eba9 · af0eba9
1 parent a3ccdbe
commit af0eba9
Show file tree

Hide file tree

Showing 2 changed files with 62 additions and 29 deletions.
diff --git a/src/ui/atoms/loader/index.tsx b/src/ui/atoms/loader/index.tsx
@@ -8,14 +8,16 @@ interface LoaderProps {
   className?: string;
 }
 
-const LoaderBase = ({ description = 'Loading...', variant, className }: LoaderProps & Variant) => {
+const LoaderBase = ({
+  description = 'Loading...',
+  variant = 'primary',
+  className,
+}: LoaderProps & Variant) => {
   return (
     <div className={className} data-variant={variant}>
       <div data-loader>
-        <svg data-track>
-          <path d="M10.117 6.663a18 18 0 0016.867 31.314" data-track-segment />
-          <path d="M35.978 11.016A18 18 0 007.33 9.29" data-track-segment />
-          <path d="M37.976 15.016a18.001 18.001 0 00-9.203-10.251" data-track-segment />
+        <svg viewBox="0 0 100 100" data-track>
+          <circle data-spinner cx={50} cy={50} r={45} strokeWidth={10} />
         </svg>
         <div data-text>{description}</div>
       </div>
@@ -25,16 +27,43 @@ const LoaderBase = ({ description = 'Loading...', variant, className }: LoaderPr
 
 const trackAnimation = keyframes`
   0% {
+    transform: rotateZ(0deg);
+  }
+
+  100% {
+    transform: rotateZ(360deg)
+  }
+`;
+
+const spinnerAnimation = keyframes`
+ 0%,
+  25% {
+    stroke-dashoffset: 280;
+
     transform: rotate(0);
   }
+
+  50%,
+  75% {
+    stroke-dashoffset: 75;
+
+    transform: rotate(45deg);
+  }
+
   100% {
+    stroke-dashoffset: 280;
+
     transform: rotate(360deg);
   }
 `;
 
 export const Loader = styled(LoaderBase)`
   ${box}
-  --local-size: 42px;
+  --local-size: calc(
+    1px * var(--woly-component-level) * var(--woly-main-level) * 4
+  );
+  --local-track-color: var(--woly-canvas-default);
+  --local-spinner-color: var(--woly-shape-default);
 
   display: flex;
   align-items: center;
@@ -44,11 +73,6 @@ export const Loader = styled(LoaderBase)`
   width: 100%;
   height: 100%;
 
-  color: var(--woly-canvas-text-default);
-  font-weight: 400;
-  font-size: 15px;
-  line-height: 21px;
-
   [data-loader] {
     display: flex;
     flex-direction: column;
@@ -58,31 +82,32 @@ export const Loader = styled(LoaderBase)`
   [data-track] {
     width: var(--local-size);
     height: var(--local-size);
-
-    margin-bottom: 20px;
+    margin-bottom: calc(var(--local-gap) * 2);
 
     transform-origin: 50% 50%;
 
-    animation: 0.8s ${trackAnimation} cubic-bezier(0.2, 0, 0.38, 0.9) infinite;
+    animation: 2s linear infinite ${trackAnimation};
 
     fill: transparent;
   }
 
-  [data-track-segment] {
-    stroke-width: 6;
-  }
-  [data-track-segment]:nth-child(1) {
-    stroke: var(--palette-lavender-500);
-  }
-  [data-track-segment]:nth-child(2) {
-    stroke: var(--palette-lavender-300);
-  }
-  [data-track-segment]:nth-child(3) {
-    stroke: var(--palette-lavender-100);
+  [data-track] circle {
+    transform-origin: 50% 50%;
+
+    animation: 1.4s ease-in-out infinite both ${spinnerAnimation};
+
+    stroke: var(--local-spinner-color);
+    stroke-linecap: round;
+    stroke-dashoffset: 280;
+    stroke-dasharray: 283;
   }
 
   [data-text] {
+    color: var(--woly-canvas-text-default);
+    font-weight: 400;
+    font-size: var(--woly-font-size);
     line-height: var(--woly-line-height);
+    line-height: 21px;
     text-align: center;
   }
 ` as StyledComponent<'div', Record<string, unknown>, LoaderProps & Variant>;
diff --git a/src/ui/atoms/loader/usage.mdx b/src/ui/atoms/loader/usage.mdx
@@ -5,7 +5,7 @@ package: 'woly'
 ---
 
 import {Loader} from 'ui';
-import {Playground} from 'lib/playground'
+import {block, Playground} from 'lib/playground'
 
 `Loader` component is used when retrieving data or performing slow computations, and help to notify users that loading is underway..
 Description text below animated spinner provides more details on the current operation.
@@ -15,14 +15,22 @@ Use a `Loader` component whenever the wait time is anticipated to be longer than
 ### Example
 
 <Playground>
-  <div style={{ height: 300 }}>
-    <Loader variant="primary" description="Loading, please wait until all data is loaded" />
-  </div>
+  <block.H>
+    <div style={{ height: 300 }}>
+      <Loader description="Loading, please wait until all data is loaded" />
+    </div>
+  </block.H>
+  <block.S>
+    <div style={{ height: 100 }}>
+      <Loader variant="secondary" />
+    </div>
+  </block.S>
 </Playground>
 
 ### Props
 
 | Name          | Type             | Default      | Description                                     |
 | ------------- | ---------------- | ------------ | ----------------------------------------------- |
 | `description` | `string`         | 'Loading...' | Description text below the animated spinner     |
+| `variant`     | `string`         | `'primary'`  | Variant prop to style Input component           |
 | `...`         | `HTMLDivElement` | `{}`         | Other props are inherited from `HTMLDivElement` |