[FRNT-517] implement loader component

src/ui/atoms/index.ts

@@ -10,6 +10,7 @@ export { ListItem, ListContainer } from './list';
 export { Notification } from './notification';
 export { Separator } from './separator';
 export { Surface } from './surface';
+export { Loader } from './loader';
 export { Table, Thead, Tbody, Tr, Td, Th } from './table';
 export { Text } from './text';
 export { TextArea } from './text-area';

src/ui/atoms/loader/index.tsx

@@ -0,0 +1,113 @@
+import * as React from 'react';
+import styled, { StyledComponent, keyframes } from 'styled-components';
+import { Variant } from 'lib/types';
+import { box } from 'ui/elements';
+
+interface LoaderProps {
+  description?: string;
+  className?: string;
+}
+
+const LoaderBase = ({
+  description = 'Loading...',
+  variant = 'primary',
+  className,
+}: LoaderProps & Variant) => {
+  return (
+    <div className={className} data-variant={variant}>
+      <div data-loader>
+        <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>
+    </div>
+  );
+};
+
+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: 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;
+  justify-content: center;
+
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+
+  [data-loader] {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  [data-track] {
+    width: var(--local-size);
+    height: var(--local-size);
+    margin-bottom: calc(var(--local-gap) * 2);
+
+    transform-origin: 50% 50%;
+
+    animation: 2s linear infinite ${trackAnimation};
+
+    fill: transparent;
+  }
+
+  [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>;

src/ui/atoms/loader/usage.mdx

@@ -0,0 +1,36 @@
+---
+name: loader
+category: atoms
+package: 'woly'
+---
+
+import {Loader} from 'ui';
+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.
+
+Use a `Loader` component whenever the wait time is anticipated to be longer than three seconds.
+
+### Example
+
+<Playground>
+  <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` |