Loader component

ui/src/components/Loader/Loader.jsx

@@ -0,0 +1,24 @@
+import { React } from 'react'
+import PropTypes from 'prop-types'
+
+import styles from './Loader.module.scss'
+import classNames from 'classnames'
+
+export function Loader({ className, variant }) {
+  return (
+    <div className={classNames(className, styles.loader, styles[variant])}>
+      <span></span>
+      <span></span>
+      <span></span>
+      <span></span>
+      <span></span>
+    </div>
+  )
+}
+
+const loaderPropTypes = {
+  variant: PropTypes.oneOf(['primary', 'secondary']),
+  className: PropTypes.string
+}
+
+Loader.propTypes = loaderPropTypes

ui/src/components/Loader/Loader.module.scss

@@ -0,0 +1,78 @@
+@import '../../assets/styles/abstracts/variables';
+
+$colors-primary:
+  $primary-p100,
+  $primary-p300,
+  $primary-p500,
+  $primary-p700,
+  $primary-p900;
+
+$colors-secondary:
+  $alternative-a100,
+  $alternative-a300,
+  $alternative-a500,
+  $alternative-a700,
+  $alternative-a900;
+
+$delays: 0.1s, 0.25s, 0.4s, 0.6s, 0.8s;
+
+@mixin loader-dots-coloring($colors, $delays) {
+  @for $i from 1 through 5 {
+    span:nth-child(#{$i}) {
+      background-color: nth($colors, $i);
+      animation-delay: nth($delays, $i);
+    }
+  }
+}
+
+@mixin loading-jumping-dots-height-Y($up, $down){
+  @keyframes loading {
+    0% {
+      transform: translateY(0);
+    }
+    25% {
+      transform: translateY($up);
+    }
+    50% {
+      transform: translateY($down);
+    }
+    100% {
+      transform: translateY(0);
+    }
+  }
+}
+
+.loader {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  display: flex;
+  align-items: center;
+
+  span {
+    height: 25px;
+    width: 25px;
+    margin-right: 10px;
+    border-radius: 50%;
+    animation: loading 1.1s linear infinite;
+  }
+
+  @include loading-jumping-dots-height-Y(5px, -40px);
+
+  &.primary {
+    @include loader-dots-coloring($colors-primary, $delays);
+  }
+  &.secondary {
+    @include loader-dots-coloring($colors-secondary, $delays);
+  }
+
+  @media only screen and (min-width: 900px) {
+    span {
+      height: 35px;
+      width: 35px;
+      margin-right: 15px;
+    }
+    @include loading-jumping-dots-height-Y(10px, -60px)
+  }
+}

ui/src/components/Loader/Loader.stories.jsx

@@ -0,0 +1,29 @@
+import React from 'react'
+import { Loader } from './Loader.jsx'
+
+export default {
+  component: Loader,
+
+  parameters: {
+    componentSubtitle: 'A Loader component based on css transform and animation-delay.'
+  },
+
+  title: 'Components/Loader',
+  argTypes: {
+    variant: {
+      options: ['primary', 'secondary'],
+      control: { type: 'radio' },
+      type: { required: true },
+      table: {
+        category: 'props',
+        type: { summary: 'string', detail: 'variant' },
+        defaultValue: { summary: 'primary' }
+      }
+    }
+  }
+}
+
+const Template = (args) => <Loader {...args} />
+
+export const Default = Template.bind({})
+Default.storyName = 'Loader'