vcc-ui/_src/components/loading-bar/index.js

VCC UI is a collection of React UI Components that can be used for developing front-end applications at Volvo Car Corporation.

import React from 'react';
import PropTypes from 'prop-types';

import { Block } from '../block';

export const LoadingBar = React.forwardRef(
  ({ isLoading, transitionDuration = 1500 }, ref) => {
    return (
      <Block extend={styles.container} ref={ref}>
        {isLoading ? (
          <Block extend={styles.bar({ transitionDuration })}>
            <Block extend={styles.loadingBar} />
            <Block extend={styles.transparentBar} />
          </Block>
        ) : null}
      </Block>
    );
  }
);

LoadingBar.displayName = 'LoadingBar';

const styles = {
  container: ({
    theme: {
      color: {
        background: { secondary },
      },
    },
  }) => ({
    backgroundColor: secondary,
    width: '100%',
    overflow: 'hidden',
  }),
  bar: ({ transitionDuration }) => ({
    width: '100%',
    height: 3,
    position: 'relative',
    display: 'flex',
    animationName: {
      from: {
        transform: 'translateX(-70%)',
      },
      to: {
        transform: 'translateX(120%)',
      },
    },
    animationDuration: transitionDuration + 'ms',
    animationTimingFunction: 'linear',
    animationIterationCount: 'infinite',
  }),
  transparentBar: ({
    theme: {
      color: {
        background: { secondary },
      },
    },
  }) => ({
    backgroundColor: secondary,
    flexGrow: 3,
  }),
  loadingBar: ({
    theme: {
      color: {
        ornament: { highlight },
      },
    },
  }) => ({
    backgroundColor: highlight,
    flexGrow: 7,
  }),
};

LoadingBar.propTypes = {
  /** Determines whether the LoadingBar is shown or not */
  isLoading: PropTypes.bool,
  /** Optional prop to customize the transition duration for showing/hiding the LoadingBar */
  transitionDuration: PropTypes.number,
};