# All files / Progress Progress.styled.ts

0% Statements 0/8
100% Branches 0/0
0% Functions 0/4
0% Lines 0/4

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
    45
    46
    47
    48

     import { Style, Styles } from 'jss'
    import { Theme } from '../styles'
    import { ProgressClassProps } from './Progress.type'

    const root = (theme: Theme): Style => ({
      position: 'relative',
      overflow: 'hidden',
      height: 4,
      backgroundColor: theme.colors!.standard!.default
    })

    const progress = (theme: Theme): Style => ({
      width: '100%',
      transformOrigin: 'left',
      position: 'absolute',
      left: 0,
      top: 0,
      bottom: 0,
      // isIndeterminate false
      background: theme.colors!.primary!.default,
      transition: 'transform 0.43s linear',
      // keyframes
      '@global': {
        '@keyframes indeterminateProgress': {
          from: {
            transform: 'translateX(-130%)'
          },
          to: {
            transform: 'translateX(100%)'
          }
        }
      }
    })
    const isIndeterminate = (theme: Theme): Style => ({
      background: `linear-gradient(to right,
        ${theme.colors!.standard!.default} 0%,
        ${theme.colors!.primary!.default} 50%,
        ${theme.colors!.standard!.default} 100%
      )`,
      animation: '$indeterminateProgress 2.6s infinite'
    })

    export const styles = (theme: Theme): Styles<ProgressClassProps> => ({
      root: root(theme),
      progress: progress(theme),
      isIndeterminate: isIndeterminate(theme)
    })