# All files / src/Spinner Spinner.styled.ts

100% Statements 7/7
100% Branches 0/0
100% Functions 2/2
100% Lines 5/5

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44

    3x

    2x

    2x

    2x

    3x

     import { Style, Styles } from 'jss'
    import { Theme } from '../styles'
    import { SpinnerClassProps } from './Spinner.type'

    const root = (theme: Theme): Style => ({
      display: 'inline-block',
      borderRadius: '50%',
      border: '1.5px solid',
      borderColor: `${theme.colors!.primary!.default} ${theme.colors!.primary!.light3} ${
        theme.colors!.primary!.light3
      }`,
      '@global': {
        '@keyframes rotate': {
          from: {
            transform: 'rotate(0deg)'
          },
          to: {
            transform: 'rotate(360deg)'
          }
        }
      },
      animation: '$rotate 1.3s cubic-bezier(0.5, 0.2, 0.3, 0.65) infinite'
    })

    const sizeSmall: Style = {
      width: 16,
      height: 16
    }
    const sizeMedium: Style = {
      width: 20,
      height: 20
    }
    const sizeLarge: Style = {
      width: 28,
      height: 28
    }

    export const styles = (theme: Theme): Styles<SpinnerClassProps> => ({
      root: root(theme),
      sizeSmall,
      sizeMedium,
      sizeLarge
    })