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';