# All files / src/Loader Loader.tsx

100% Statements 20/20
100% Branches 6/6
100% Functions 2/2
100% Lines 16/16

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

    9x
    9x

    9x

    200x
    200x
    102x

    9x
    75x
    75x
    75x
    75x

    75x

    75x

    9x
     import React from 'react'
    import { StyledGradient, StyledLoader } from './Loader.styles'
    import { LoaderProps } from './Loader.types'

    export const minProgressValue = 0
    export const maxProgressValue = 100

    export const clamp = (
      value: number,
      minValue: number = minProgressValue,
      maxValue: number = maxProgressValue
    ) => Math.max(minValue, Math.min(maxValue, Math.floor(value)))

    /**
     * @deprecatedSince 11
     * @deprecated Intended for internal library development.
     */
    export const Loader: React.FC<LoaderProps> = function Loader({
      value = 0,
      animated = false,
      children,
      ...props
    }) {
      const progressValue = clamp(value)

      return (
        <StyledLoader {...props} style={{ width: `${progressValue}%` }}>
          <StyledGradient $animated={animated}>{children}</StyledGradient>
        </StyledLoader>
      )
    }

    Loader.displayName = 'Loader'