# All files / src/ProgressBar ProgressBar.styles.tsx

100% Statements 16/16
52.94% Branches 9/17
100% Functions 3/3
100% Lines 15/15

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
    49
    50
    51
    52
    53
    545x
    5x
    5x
    5x

    5x

    5x

    5x

    5x

    5x

    26x
    26x

    26x
    26x

    26x
    26x

     import styled, { css, keyframes } from 'styled-components'
    import { Loader } from '../Loader/Loader'
    import { colors } from '../_styles/colors'
    import { spacing } from '../_styles/spacing'

    const loaderGridUnit = spacing.sm

    const animationDelay = '300ms'

    const fadeIn = keyframes`
      from {
        opacity: 1;
      }
      to {
        opacity: 0;
      }
    `

    export const StyledProgressBarLoader = styled(Loader)``

    export const StyledProgressBar = styled.div<{
      $complete: boolean
      $finalized: boolean
    }>`
      overflow: hidden;
      position: relative;
      display: block;
      height: ${loaderGridUnit}px;
      background-color: ${({ $complete }) =>
        $complete ? colors.blue50 : colors.gray94};
      border-radius: ${loaderGridUnit * 2}px;
      margin: ${loaderGridUnit * 2}px 0;
      transition: background-color 0s linear;

      ${({ $finalized }) =>
        $finalized &&
        css`
          transition-delay: ${animationDelay};

          ${StyledProgressBarLoader} {
            animation: ${fadeIn} 0 ease-out ${animationDelay} forwards;
          }
        `}

      ${({ $complete, $finalized }) =>
        $complete &&
        !$finalized &&
        css`
          ${StyledProgressBarLoader} {
            opacity: 0;
          }
        `}
    `