# All files / src/Loader Loader.styles.ts

100% Statements 11/11
100% Branches 12/12
100% Functions 1/1
100% Lines 11/11

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
    549x
    9x

    9x

    9x

    9x

    9x

    9x

    9x

    9x

    70x
    70x

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

    const backgroundSize = 8

    const color1 = colors.blue50

    const color2 = colors.blue40

    export const loaderTransitionDuration = 250

    const movingStripes = keyframes`
      from {
        background-position: ${backgroundSize}px 0;
      }
      100% {
        background-position: 0 ${backgroundSize}px;
      }
    `

    export const StyledLoader = styled.div`
      display: block;
      height: 100%;
      left: 0;
      min-width: 12px; // TODO one-off value
      position: absolute;
      transition: width ${loaderTransitionDuration}ms ease-out; // TODO animation palette
      top: 0;
    `

    export const StyledGradient = styled.div<{ $animated: boolean }>`
      height: 100%;

      ${({ $animated }) =>
        $animated
          ? css`
              animation: ${movingStripes} 0.5s linear infinite;
              background-image: linear-gradient(
                45deg,
                ${color1} 26%,
                ${color2} 25%,
                ${color2} 51%,
                ${color1} 50%,
                ${color1} 76%,
                ${color2} 75%,
                ${color2}
              );
              background-size: ${backgroundSize}px ${backgroundSize}px;
            `
          : css`
              background-color: ${colors.blue50};
            `}
    `