vcc-ui/es/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';

var getSpinnerStyle = function getSpinnerStyle(_ref) {
  var size = _ref.size,
      color = _ref.color;
  return {
    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 var Spinner = React.forwardRef(function (_ref2, ref) {
  var _ref2$color = _ref2.color,
      color = _ref2$color === void 0 ? 'black' : _ref2$color,
      _ref2$width = _ref2.width,
      width = _ref2$width === void 0 ? 3 : _ref2$width,
      _ref2$size = _ref2.size,
      size = _ref2$size === void 0 ? 40 : _ref2$size;
  return React.createElement(Block, {
    ref: ref,
    as: "svg",
    x: "0px",
    y: "0px",
    viewBox: "20 20 40 40",
    extend: getSpinnerStyle({
      size: size,
      color: color
    })
  }, React.createElement("circle", {
    cx: "40",
    cy: "40",
    r: "18",
    strokeWidth: width > 4 ? 3 : width,
    fill: "none"
  }));
});
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
};