feat: add CircularLoader

src/components/circular-loader/CircularLoader.css

@@ -0,0 +1,128 @@
+@import "variables";
+
+.circular-loader {
+    position: relative;
+    width: 4em;
+    height: 4em;
+    display: inline-block;
+    font-size: 10px;
+}
+
+.circular-loader > div {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}
+
+.circular-loader > div::before {
+    content: "";
+    width: 15%;
+    height: 15%;
+    margin: 0 auto;
+    display: block;
+    background-color: currentColor;
+    border-radius: 100%;
+    animation: circle-bounce 1.2s infinite ease-in-out both;
+}
+
+.circular-loader > div:nth-child(2) {
+    transform: rotate(30deg);
+}
+
+.circular-loader > div:nth-child(3) {
+    transform: rotate(60deg);
+}
+
+.circular-loader > div:nth-child(4) {
+    transform: rotate(90deg);
+}
+
+.circular-loader > div:nth-child(5) {
+    transform: rotate(120deg);
+}
+
+.circular-loader > div:nth-child(6) {
+    transform: rotate(150deg);
+}
+
+.circular-loader > div:nth-child(7) {
+    transform: rotate(180deg);
+}
+
+.circular-loader > div:nth-child(8) {
+    transform: rotate(210deg);
+}
+
+.circular-loader > div:nth-child(9) {
+    transform: rotate(240deg);
+}
+
+.circular-loader > div:nth-child(10) {
+    transform: rotate(270deg);
+}
+
+.circular-loader > div:nth-child(11) {
+    transform: rotate(300deg);
+}
+
+.circular-loader > div:nth-child(12) {
+    transform: rotate(330deg);
+}
+
+.circular-loader > div:nth-child(2)::before {
+    animation-delay: -1.1s;
+}
+
+.circular-loader > div:nth-child(3)::before {
+    animation-delay: -1s;
+}
+
+.circular-loader > div:nth-child(4)::before {
+    animation-delay: -0.9s;
+}
+
+.circular-loader > div:nth-child(5)::before {
+    animation-delay: -0.8s;
+}
+
+.circular-loader > div:nth-child(6)::before {
+    animation-delay: -0.7s;
+}
+
+.circular-loader > div:nth-child(7)::before {
+    animation-delay: -0.6s;
+}
+
+.circular-loader > div:nth-child(8)::before {
+    animation-delay: -0.5s;
+}
+
+.circular-loader > div:nth-child(9)::before {
+    animation-delay: -0.4s;
+}
+
+.circular-loader > div:nth-child(10)::before {
+    animation-delay: -0.3s;
+}
+
+.circular-loader > div:nth-child(11)::before {
+    animation-delay: -0.2s;
+}
+
+.circular-loader > div:nth-child(12)::before {
+    animation-delay: -0.1s;
+}
+
+@keyframes circle-bounce {
+    0%,
+    80%,
+    100% {
+        transform: scale(0);
+    }
+
+    40% {
+        transform: scale(1);
+    }
+}

src/components/circular-loader/CircularLoader.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import styles from './CircularLoader.css';
+
+const CircularLoader = ({ className, ...rest }) => {
+    const finalClassName = classNames(
+        styles.circularLoader,
+        className
+    );
+
+    return (
+        <div { ...rest } className={ finalClassName }>
+            <div />
+            <div />
+            <div />
+            <div />
+            <div />
+            <div />
+            <div />
+            <div />
+            <div />
+            <div />
+            <div />
+            <div />
+        </div>
+    );
+};
+
+CircularLoader.propTypes = {
+    className: PropTypes.string,
+};
+
+export default CircularLoader;

src/components/circular-loader/README.md

@@ -0,0 +1,35 @@
+# CircularLoader
+
+A circular loader.
+
+## Usage
+
+```jsx
+import { CircularLoader } from '@discussify/styleguide';
+
+<CircularLoader />
+```
+
+### Changing the color
+
+You may change the dots color via the `color` CSS property.
+
+```jsx
+import { CircularLoader } from '@discussify/styleguide';
+
+<CircularLoader style={ { color: 'red' } } />
+```
+
+### Changing the size
+
+You may change the dots size via the `fontSize` CSS property.
+
+```jsx
+import { CircularLoader } from '@discussify/styleguide';
+
+<CircularLoader style={ { fontSize: 20 } } />
+```
+
+## Props
+
+No props to document.

src/components/circular-loader/index.js

@@ -0,0 +1 @@
+export { default } from './CircularLoader.js';

src/components/dot-loader/DotLoader.css

@@ -12,7 +12,7 @@
     color: var(--color-black);
     font-size: 10px;
 
-    & div {
+    & > div {
         position: absolute;
         top: 50%;
         width: calc(var(--size) / 4);

stories/circular-loader.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { withKnobs, object } from '@storybook/addon-knobs';
+import { withReadme } from 'storybook-readme';
+import CircularLoader from '../src/components/circular-loader';
+import readme from '../src/components/circular-loader/README.md';
+
+storiesOf('CircularLoader', module)
+.addDecorator(withReadme(readme))
+.addDecorator(withKnobs)
+.add('Standard', () => (
+    <CircularLoader />
+))
+.add('Custom color', () => (
+    <CircularLoader style={ { color: 'red' } } />
+))
+.add('Custom size', () => (
+    <CircularLoader style={ { fontSize: 20 } } />
+))
+.add('Knobs playground ⚽', () => {
+    const style = object('style', { color: 'red', fontSize: 20 });
+
+    return <CircularLoader style={ style } />;
+});

stories/index.js

@@ -3,6 +3,7 @@ import './base/typography';
 import './avatar';
 import './brand-logo';
 import './button';
+import './circular-loader';
 import './dot-loader';
 import './floating-d';
 import './icon';