vcc-ui/_src/components/spinner/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";

const getSpinnerStyle = ({ size, color }) => ({
	WebkitBackfaceVisibility: "hidden",
	width: size,
	height: size,
	stroke: color,
	animation: "800ms cubic-bezier(0.62, 0.63, 0, 0.53) infinite",
	transformOrigin: "center",
	strokeDasharray: 45,
	strokeDashoffset: 0,
	animationName: {
		"100%": {
			transform: "rotate(360deg)"
		}
	}
});

export function Spinner({ color = "black", width = 3, size = 40 }) {
	return (
		<Block
			as="svg"
			x="0px"
			y="0px"
			viewBox="20 20 40 40"
			extend={getSpinnerStyle({ size, color })}
		>
			<circle
				cx="40"
				cy="40"
				r="18"
				strokeWidth={width > 4 ? 3 : width}
				fill="none"
			/>
		</Block>
	);
}

Spinner.propTypes = {
	/* Pick a color for the spinner */
	color: PropTypes.string,
	/* Set spinner size */
	size: PropTypes.number,
	/* Set spinner thickness (1-4) */
	width: PropTypes.number
};