vcc-ui/es/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 var LoadingBar = React.forwardRef(function (_ref, ref) {
  var isLoading = _ref.isLoading,
      _ref$transitionDurati = _ref.transitionDuration,
      transitionDuration = _ref$transitionDurati === void 0 ? 1500 : _ref$transitionDurati;
  return React.createElement(Block, {
    extend: styles.container,
    ref: ref
  }, isLoading ? React.createElement(Block, {
    extend: styles.bar({
      transitionDuration: transitionDuration
    })
  }, React.createElement(Block, {
    extend: styles.loadingBar
  }), React.createElement(Block, {
    extend: styles.transparentBar
  })) : null);
});
LoadingBar.displayName = 'LoadingBar';
var styles = {
  container: function container(_ref2) {
    var secondary = _ref2.theme.color.background.secondary;
    return {
      backgroundColor: secondary,
      width: '100%',
      overflow: 'hidden'
    };
  },
  bar: function bar(_ref3) {
    var transitionDuration = _ref3.transitionDuration;
    return {
      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: function transparentBar(_ref4) {
    var secondary = _ref4.theme.color.background.secondary;
    return {
      backgroundColor: secondary,
      flexGrow: 3
    };
  },
  loadingBar: function loadingBar(_ref5) {
    var highlight = _ref5.theme.color.ornament.highlight;
    return {
      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
};