import React, { FC } from 'react';
import classNames from 'classnames';

import css from './index.module.css';

const Loading: FC<{}> = () => (
  <div className={css.loading}>
    <div
      className={classNames([css.loading__circle1, css.loading__circle])}
    ></div>
    <div
      className={classNames([css.loading__circle2, css.loading__circle])}
    ></div>
    <div
      className={classNames([css.loading__circle3, css.loading__circle])}
    ></div>
    <div
      className={classNames([css.loading__circle4, css.loading__circle])}
    ></div>
    <div
      className={classNames([css.loading__circle5, css.loading__circle])}
    ></div>
    <div
      className={classNames([css.loading__circle6, css.loading__circle])}
    ></div>
    <div
      className={classNames([css.loading__circle7, css.loading__circle])}
    ></div>
    <div
      className={classNames([css.loading__circle8, css.loading__circle])}
    ></div>
    <div
      className={classNames([css.loading__circle9, css.loading__circle])}
    ></div>
    <div
      className={classNames([css.loading__circle10, css.loading__circle])}
    ></div>
    <div
      className={classNames([css.loading__circle11, css.loading__circle])}
    ></div>
    <div
      className={classNames([css.loading__circle12, css.loading__circle])}
    ></div>
  </div>
);

export default Loading;