{"size": 1020, "ext": "js", "max_stars_repo_path": "core/Loader/Dots.js", "max_stars_repo_name": "fork-ecosystem/fork-ui", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "core/Loader/Dots.js", "max_issues_repo_name": "fork-ecosystem/fork-ui", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "core/Loader/Dots.js", "max_forks_repo_name": "fork-ecosystem/fork-ui", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 23.1818181818, "max_line_length": 95, "alphanum_fraction": 0.637254902}
import React from 'react';
import cn from 'classnames';
import PropTypes from 'prop-types';

const mAnimations = Object.freeze({
  wave: 'floader-dots-wave',
  buble: 'floader-dots-buble',
});

const lAnimations = Object.keys(mAnimations);

const Dots = ({ style, color, size, animation, className, ...otherProps }) => {
  return (
    <div
      style={{
        ...style,
        color,
        '--dot-size': size,
      }}
      className={cn('floader-dots', mAnimations[animation] || 'floader-dots-buble', className)}
      {...otherProps}
    >
      <div className="floader-dot floader-dot-1" />
      <div className="floader-dot floader-dot-2" />
      <div className="floader-dot floader-dot-3" />
    </div>
  );
};

Dots.displayName = 'Loader.Dots';
Dots.propTypes = {
  style: PropTypes.string,
  color: PropTypes.string,
  size: PropTypes.string,
  className: PropTypes.string,
  animation: PropTypes.oneOf(lAnimations)
};
Dots.defaultProps = {
  animation: 'buble',
  size: '13px',
};

export default Dots;
