feat: add rolling

README.md

@@ -7,12 +7,17 @@
       alt="CircleCI"
     />
   </a>
-  <a href='https://coveralls.io/github/imkrunal/react-loading-io?branch=master'>
+  <!-- <a href='https://coveralls.io/github/imkrunal/react-loading-io?branch=master'>
     <img
       src='https://coveralls.io/repos/github/imkrunal/react-loading-io/badge.svg?branch=master'
       alt='Coverage Status'
     />
-  </a>
+  </a> -->
 </p>
 
 <p align="center">CSS-only spinners of loading.io for React</p>
+
+| Component                                                                             | Optional Parameters                     |
+| ------------------------------------------------------------------------------------- | --------------------------------------- |
+| [Eclipse](https://imkrunal.github.io/react-loading-io/?path=/story/spinners--eclipse) | size, sizeUnit, color, speed, thickness |
+| [Rolling](https://imkrunal.github.io/react-loading-io/?path=/story/spinners--rolling) | size, sizeUnit, color, speed, thickness |

src/Rolling/Rolling.js

@@ -0,0 +1,83 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { css, keyframes } from '@emotion/core'
+
+const rolling = keyframes`
+  0% {
+    transform: translate(-50%, -50%) rotate(0deg);
+  }
+  100% {
+    transform: translate(-50%, -50%) rotate(360deg);
+  }
+`
+const convertToPx = size => {
+  const px = size * 16
+  return px
+}
+
+class Rolling extends React.Component {
+  render () {
+    const { size, sizeUnit, thickness, color, speed } = this.props
+    let scale
+    if (sizeUnit === 'em' || sizeUnit === 'rem') {
+      scale = convertToPx(size) / 200
+    } else {
+      scale = size / 200
+    }
+    const translate = size * scale
+
+    return (
+      <div>
+        <div
+          css={css`
+            position: relative;
+            width: ${`${size}${sizeUnit}`} !important;
+            height: ${`${size}${sizeUnit}`} !important;
+            transform: translate(
+                -${`${translate}${sizeUnit}`},
+                -${`${translate}${sizeUnit}`}
+              )
+              scale(${scale})
+              translate(
+                ${`${translate}${sizeUnit}`},
+                ${`${translate}${sizeUnit}`}
+              );
+          `}
+        >
+          <div
+            css={css`
+              position: absolute;
+              width: 160px;
+              height: 160px;
+              border: ${thickness}px solid ${color};
+              border-top-color: transparent;
+              border-radius: 50%;
+              animation: ${rolling} ${speed}s linear infinite;
+              top: 100px;
+              left: 100px;
+              transform: rotate(90deg);
+            `}
+          ></div>
+        </div>
+      </div>
+    )
+  }
+}
+
+Rolling.propTypes = {
+  size: PropTypes.number,
+  sizeUnit: PropTypes.string,
+  color: PropTypes.string,
+  thickness: PropTypes.number,
+  speed: PropTypes.number
+}
+
+Rolling.defaultProps = {
+  size: 200,
+  sizeUnit: 'px',
+  color: '#f08d43',
+  thickness: 20,
+  speed: 1
+}
+
+export default Rolling

src/Rolling/Rolling.test.js

@@ -0,0 +1,8 @@
+import React from 'react'
+import renderer from 'react-test-renderer'
+import { Rolling } from '..'
+
+it('renders correctly', () => {
+  const tree = renderer.create(<Rolling />).toJSON()
+  expect(tree).toMatchSnapshot()
+})

src/Rolling/__snapshots__/Rolling.test.js.snap

@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<div>
+  <div
+    className="css-hz1g30-Rolling"
+  >
+    <div
+      className="css-q7tgk4-Rolling"
+    />
+  </div>
+</div>
+`;

src/Rolling/index.js

@@ -0,0 +1 @@
+export { default as Rolling } from './Rolling'

src/index.js

@@ -1 +1,2 @@
 export * from './Eclipse'
+export * from './Rolling'

stories/index.js

@@ -1,5 +1,7 @@
 import React from 'react'
 import { storiesOf } from '@storybook/react'
-import { Eclipse } from '../src'
+import { Eclipse, Rolling } from '../src'
 
-storiesOf('Spinners', module).add('Eclipse', () => <Eclipse />)
+storiesOf('Spinners', module)
+  .add('Eclipse', () => <Eclipse />)
+  .add('Rolling', () => <Rolling />)