// /src/components/New/Loader/index.jsx

import React from 'react';
import PropTypes from 'prop-types';

import './styles.css';

const Loader = ({ size, distance, className }) => {
  const itemProps = {
    className: 'loader_new__item',
    style: {
      width: `${size}px`,
      height: `${size}px`,
      margin: `0 ${distance}px`,
    }
  };
  return (
    <div className={`loader_new ${className}`}>
      <span {...itemProps} />
      <span {...itemProps} />
      <span {...itemProps} />
    </div>
  );
};

Loader.propTypes = {
  size: PropTypes.number,
  distance: PropTypes.number,
  className: PropTypes.string,
};

Loader.defaultProps = {
  size: 4,
  distance: 2,
  className: '',
};

export default Loader;

// /src/components/New/Loader/Loader.md

```js
<Loader />

```


// styleguide.config.js

module.exports = {
  compilerConfig: {
    objectAssign: 'Object.assign'
  },
  version: require('./package.json').version,
  serverPort: 6060,
  assetsDir: 'src/assets',
  propsParser: require('react-docgen-typescript').withCustomConfig('./tsconfig.json').parse,
  skipComponentsWithoutExample: true,
  components: ['src/components/*/*.jsx', 'src/components/New/*/*.jsx', 'src/components/New/*/*.tsx'],
};