#### Source

```jsx static
// index.tsx
import React, { FC } from 'react';
import { LoaderProps, LoaderSizes } from 'types';
import * as S from './styles';

const Loader: FC<LoaderProps> = ({
  children,
  isLoading = true,
  message,
  size = LoaderSizes.medium,
}) => {
  if (isLoading) {
    return (
      <S.LoaderContainer data-testid='loader-container'>
        <S.Loader size={size} data-testid='loader' />
        {message && message}
      </S.LoaderContainer>
    );
  }
  return <>{children}</>;
};
```

```jsx static
// styles.ts
import styled, { keyframes } from 'styled-components';
import { LoaderSizes } from 'types';

export const LoaderContainer = styled.div`
  align-items: center;
  display: flex;
  justify-content: center;
  margin: 3rem 0;
`;

const rotate = keyframes`
  from { transform: rotate(0deg); }
  to { transform: rotate(359deg); }`;

const Loader = styled.div<{ size: LoaderSizes }>`
  animation: ${rotate} 0.8s infinite ease-in-out;
  display: inline-block;
  border-color: #945ffa;
  border-radius: 50%;
  border-style: solid;
  border-top-color: #fcca00;
  margin-right: 1rem;
  -webkit-animation: ${rotate} 0.8s infinite ease-in-out;
  ${(props) => handleSize(props)}
`;

const handleSize = ({ size }) => {
  switch (size) {
    case LoaderSizes.small:
      return `
        border-width: 0.25rem;
        height: 1.8rem;
        width: 1.8rem;
      `;
    case LoaderSizes.medium:
      return `
        border-width: 0.325rem;
        height: 2.4rem;
        width: 2.4rem;
      `;
    case LoaderSizes.large:
    default:
      return `
        border-width: 0.4rem;
        height: 3.2rem;
        width: 3.2rem;
      `;
  }
};
```

#### With message

```js
<Loader message='Loading...'>
  <div />
</Loader>
```

#### Sizes

```jsx padded
<Loader size='small' message='Small'>
  <div />
</Loader>
<Loader message='Medium'>
  <div />
</Loader>
<Loader size='large' message='Large'>
  <div />
</Loader>
```