summaryrefslogtreecommitdiffstats
path: root/src/components/atoms/icons/computer-screen.stories.tsx
diff options
context:
space:
mode:
authorArmand Philippot <git@armandphilippot.com>2022-06-09 14:47:03 +0200
committerArmand Philippot <git@armandphilippot.com>2022-06-09 14:47:03 +0200
commitaa8c55e48f3cdbb52e3d24e6b2e71ac0f23ec13c (patch)
tree0654c43713ba3728dd049b1917c1bbcea971ff9a /src/components/atoms/icons/computer-screen.stories.tsx
parentb9f3024987404e3617afcb0c0ff29e0944fa945b (diff)
chore(toolbar): add missing animation on medium and large devices
Diffstat (limited to 'src/components/atoms/icons/computer-screen.stories.tsx')
0 files changed, 0 insertions, 0 deletions
generated by cgit v1.2.3 (git 2.39.1) at 2025-11-02 05:48:07 +0000
color: #008800 } /* Operator.Word */ .highlight .w { color: #bbbbbb } /* Text.Whitespace */ .highlight .mb { color: #0000DD; font-weight: bold } /* Literal.Number.Bin */ .highlight .mf { color: #0000DD; font-weight: bold } /* Literal.Number.Float */ .highlight .mh { color: #0000DD; font-weight: bold } /* Literal.Number.Hex */ .highlight .mi { color: #0000DD; font-weight: bold } /* Literal.Number.Integer */ .highlight .mo { color: #0000DD; font-weight: bold } /* Literal.Number.Oct */ .highlight .sa { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Affix */ .highlight .sb { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Backtick */ .highlight .sc { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Char */ .highlight .dl { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Delimiter */ .highlight .sd { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Doc */ .highlight .s2 { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Double */ .highlight .se { color: #0044dd; background-color: #fff0f0 } /* Literal.String.Escape */ .highlight .sh { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Heredoc */ .highlight .si { color: #3333bb; background-color: #fff0f0 } /* Literal.String.Interpol */ .highlight .sx { color: #22bb22; background-color: #f0fff0 } /* Literal.String.Other */ .highlight .sr { color: #008800; background-color: #fff0ff } /* Literal.String.Regex */ .highlight .s1 { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Single */ .highlight .ss { color: #aa6600; background-color: #fff0f0 } /* Literal.String.Symbol */ .highlight .bp { color: #003388 } /* Name.Builtin.Pseudo */ .highlight .fm { color: #0066bb; font-weight: bold } /* Name.Function.Magic */ .highlight .vc { color: #336699 } /* Name.Variable.Class */ .highlight .vg { color: #dd7700 } /* Name.Variable.Global */ .highlight .vi { color: #3333bb } /* Name.Variable.Instance */ .highlight .vm { color: #336699 } /* Name.Variable.Magic */ .highlight .il { color: #0000DD; font-weight: bold } /* Literal.Number.Integer.Long */
import { useIntl } from 'react-intl';
import styles from './Spinner.module.scss';

const Spinner = ({ message }: { message?: string }) => {
  const intl = useIntl();

  return (
    <div className={styles.wrapper}>
      <div className={styles.ball}></div>
      <div className={styles.ball}></div>
      <div className={styles.ball}></div>
      <div className={styles.text}>
        {message ||
          intl.formatMessage({
            defaultMessage: 'Loading...',
            description: 'Spinner: loading text',
            id: 'q9cJQe',
          })}
      </div>
    </div>
  );
};

export default Spinner;