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 { Transition } from "react-transition-group";
import { useFela } from "react-fela";
import { Block } from "../block";

export const LoadingBar = ({ isLoading, transitionDuration = 300 }) => {
	const { theme } = useFela();

	return (
		<Transition
			in={isLoading}
			timeout={isLoading ? 50 : transitionDuration}
			mountOnEnter
			unmountOnExit
		>
			{state => (
				<Block extend={styles.container({ transitionDuration, state, theme })}>
					<Block extend={styles.loadingBar({ theme })} />
				</Block>
			)}
		</Transition>
	);
};

const styles = {
	container: ({
		transitionDuration,
		state,
		theme: {
			colors: { grey7 }
		}
	}) => ({
		width: "100%",
		height: 3,
		background: grey7,
		overflow: "hidden",
		transition: `opacity ${transitionDuration}ms cubic-bezier(0.23, 1, 0.32, 1)`,
		opacity: state === "entered" ? 1 : 0
	}),
	loadingBar: ({
		theme: {
			colors: { primary }
		}
	}) => ({
		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
};