@vtex/styleguide/lib/Spinner/index.js

> VTEX Styleguide React components ([Docs](https://vtex.github.io/styleguide))

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _config = require('vtex-tachyons/config.json');

var _config2 = _interopRequireDefault(_config);

var _utils = require('../icon/utils');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var radius = 40;
var circ = 2 * radius * Math.PI;

var Spinner = function Spinner(_ref) {
  var secondary = _ref.secondary,
      size = _ref.size,
      block = _ref.block;
  return _react2.default.createElement(
    'svg',
    {
      className: (0, _utils.baseClassname)('spinner') + ' ' + (block ? 'db' : ''),
      xmlns: 'http://www.w3.org/2000/svg',
      viewBox: '0 0 100 100',
      preserveAspectRatio: 'xMidYMid',
      height: size,
      width: size
    },
    _react2.default.createElement(
      'circle',
      {
        cx: '50',
        cy: '50',
        fill: 'none',
        r: radius,
        stroke: secondary ? _config2.default.colors.white : _config2.default.colors.blue,
        strokeWidth: '10',
        strokeDasharray: '0 0 2 ' + circ,
        strokeLinecap: 'round',
        strokeDashoffset: '1',
        transform: 'rotate(96 50 50)'
      },
      _react2.default.createElement('animate', {
        attributeName: 'stroke-dasharray',
        dur: '1.5s',
        repeatCount: 'indefinite',
        values: '0 0 2 ' + circ + ';\n          0 0 ' + circ * 0.75 + ' ' + circ + ';\n          0 ' + (circ - 2) + ' ' + circ * 0.75 + ' ' + circ
      }),
      _react2.default.createElement('animateTransform', {
        attributeName: 'transform',
        type: 'rotate',
        calcMode: 'linear',
        values: '0 50 50;360 50 50',
        keyTimes: '0;1',
        dur: '0.75s',
        begin: '0s',
        repeatCount: 'indefinite'
      })
    )
  );
};

Spinner.propTypes = {
  secondary: _propTypes2.default.bool,
  size: _propTypes2.default.number,
  block: false
};

Spinner.defaultProps = {
  secondary: false,
  size: 40,
  block: _propTypes2.default.bool
};

exports.default = Spinner;