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 const Spinner = React.forwardRef(
  ({ color = 'black', width = 3, size = 40 }, ref) => {
    return (
      <Block
        ref={ref}
        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.displayName = 'Spinner';

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,
};