UNPKG

vcc-ui

Version:

A React library for building user interfaces at Volvo Cars

102 lines (101 loc) 2.3 kB
import PropTypes from 'prop-types'; import React from 'react'; import { Block } from '../block'; /** * @deprecated Use `<progress>` element instead. See [Spinner](https://developer.volvocars.com/design-system/web/?path=/docs/components-spinner--docs) */ export const LoadingBar = /*#__PURE__*/React.forwardRef((_ref, ref) => { let { isLoading, transitionDuration = 1500 } = _ref; return /*#__PURE__*/React.createElement(Block, { extend: styles.container, ref: ref }, isLoading ? /*#__PURE__*/React.createElement(Block, { extend: styles.bar({ transitionDuration }) }, /*#__PURE__*/React.createElement(Block, { extend: styles.loadingBar }), /*#__PURE__*/React.createElement(Block, { extend: styles.transparentBar })) : null); }); LoadingBar.displayName = 'LoadingBar'; const styles = { container: _ref2 => { let { theme: { color: { background: { secondary } } } } = _ref2; return { backgroundColor: secondary, width: '100%', overflow: 'hidden' }; }, bar: _ref3 => { let { transitionDuration } = _ref3; 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: _ref4 => { let { theme: { color: { background: { secondary } } } } = _ref4; return { backgroundColor: secondary, flexGrow: 3 }; }, loadingBar: _ref5 => { let { theme: { color: { ornament: { highlight } } } } = _ref5; 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 };