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(size, 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 = function Spinner(_ref) {
  var color = _ref.color,
      size = _ref.size;
  return React.createElement(Block, {
    as: "svg",
    x: "0px",
    y: "0px",
    viewBox: "20 20 40 40",
    extend: getSpinnerStyle(size, color)
  }, React.createElement("circle", {
    cx: "40",
    cy: "40",
    r: "18",
    strokeWidth: "3",
    fill: "none"
  }));
};
Spinner.propTypes = {
  /* Pick a color for the spinner */
  color: PropTypes.string,

  /* Set spinner size */
  size: PropTypes.string,

  /* Set spinner thickness */
  width: PropTypes.string
};
Spinner.defaultProps = {
  size: "40",
  color: "#000"
};