@helpscout/hsds-react/components/Spinner/Spinner.css.js

React component library for Help Scout's Design System

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.SpinnerCircleUI = exports.SpinnerSVGUI = exports.SpinnerUI = exports.config = void 0;

var _styledComponents = _interopRequireDefault(require("styled-components"));

var config = {
  defaultSize: 16,
  shades: {
    extraMuted: '0.3',
    faint: '0.4',
    muted: '0.5',
    slightlyMuted: '0.6',
    subtle: '0.7'
  }
};
exports.config = config;
var SpinnerUI = (0, _styledComponents.default)('div').withConfig({
  displayName: "Spinnercss__SpinnerUI",
  componentId: "p4l2gg-0"
})(function (props) {
  var spinnerSize = props.spinnerSize;
  return "\n    \n    display: block;\n    width: " + spinnerSize + "px;\n    height: " + spinnerSize + "px;\n  ";
});
exports.SpinnerUI = SpinnerUI;
var SpinnerSVGUI = (0, _styledComponents.default)('svg').withConfig({
  displayName: "Spinnercss__SpinnerSVGUI",
  componentId: "p4l2gg-1"
})(function (props) {
  var speed = props.speed,
      spinnerSize = props.spinnerSize;
  return "\n    \n    animation: SpinnerUIAnimation " + speed + "ms linear infinite;\n    display: block;\n    width: " + spinnerSize + "px;\n    height: " + spinnerSize + "px;\n    x: 0px;\n    y: 0px;\n    will-change: transform;\n\n    @keyframes SpinnerUIAnimation {\n      100% {\n        transform: rotate(360deg);\n      }\n    }\n  ";
});
exports.SpinnerSVGUI = SpinnerSVGUI;
var SpinnerCircleUI = (0, _styledComponents.default)('circle').withConfig({
  displayName: "Spinnercss__SpinnerCircleUI",
  componentId: "p4l2gg-2"
})(function (props) {
  var color = props.color,
      shade = props.shade,
      isRounded = props.isRounded,
      speed = props.speed;
  var lineCap = isRounded ? 'round' : 'square';
  var opacity = config.shades[shade];
  return "\n    \n    animation: SpinnerCircleUIAnimation " + speed + "ms ease-in-out infinite;\n    display: block;\n    fill: transparent;\n    opacity: " + opacity + ";\n    stroke: " + color + ";\n    stroke-width: 3.6;\n    stroke-linecap: " + lineCap + ";\n    stroke-dasharray: 80px, 200px;\n    stroke-dashoffset: 0px;\n    will-change: transform, stroke-dashoffset;\n\n    @keyframes SpinnerCircleUIAnimation {\n      0% {\n        stroke-dasharray: 1px, 200px;\n        stroke-dashoffset: 0px;\n        opacity: 0;\n      }\n      0.1% {\n        opacity: 1;\n      }\n      50% {\n        stroke-dasharray: 100px, 200px;\n        stroke-dashoffset: -15px;\n      }\n      100% {\n        stroke-dasharray: 100px, 200px;\n        stroke-dashoffset: -125px;\n      }\n    }\n  ";
});
exports.SpinnerCircleUI = SpinnerCircleUI;