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 { Transition } from "react-transition-group";
import { useFela } from "react-fela";
import { Block } from "../block";
export var LoadingBar = function LoadingBar(_ref) {
  var isLoading = _ref.isLoading,
      _ref$transitionDurati = _ref.transitionDuration,
      transitionDuration = _ref$transitionDurati === void 0 ? 300 : _ref$transitionDurati;

  var _useFela = useFela(),
      theme = _useFela.theme;

  return React.createElement(Transition, {
    in: isLoading,
    timeout: isLoading ? 50 : transitionDuration,
    mountOnEnter: true,
    unmountOnExit: true
  }, function (state) {
    return React.createElement(Block, {
      extend: styles.container({
        transitionDuration: transitionDuration,
        state: state,
        theme: theme
      })
    }, React.createElement(Block, {
      extend: styles.loadingBar({
        theme: theme
      })
    }));
  });
};
var styles = {
  container: function container(_ref2) {
    var transitionDuration = _ref2.transitionDuration,
        state = _ref2.state,
        grey7 = _ref2.theme.colors.grey7;
    return {
      width: "100%",
      height: 3,
      background: grey7,
      overflow: "hidden",
      transition: "opacity ".concat(transitionDuration, "ms cubic-bezier(0.23, 1, 0.32, 1)"),
      opacity: state === "entered" ? 1 : 0
    };
  },
  loadingBar: function loadingBar(_ref3) {
    var primary = _ref3.theme.colors.primary;
    return {
      right: "auto",
      width: "75%",
      height: "100%",
      background: primary,
      transform: "translateX(-100vw)",
      animationName: {
        from: {
          transform: "translateX(-100%)"
        },
        to: {
          transform: "translateX(134%)"
        }
      },
      animationDelay: ".3s",
      animationDuration: "1500ms",
      animationFillMode: "forwards",
      animationTimingFunction: "linear",
      animationIterationCount: "infinite"
    };
  }
};
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
};