@makeen.io/material-ui-kit/distr/atoms/CircularProgress/index.js

Makeen UI components kit. Based on material-ui.

import _extends from "@babel/runtime/helpers/extends";import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";function _templateObject4() {var data = _taggedTemplateLiteral(["\n  font-size: ", ";\n  padding: 16px 14px;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  color: ", ";\n"]);_templateObject4 = function _templateObject4() {return data;};return data;}function _templateObject3() {var data = _taggedTemplateLiteral(["\n  div {\n    background-color: ", ";\n  border-radius: 2px;\n"]);_templateObject3 = function _templateObject3() {return data;};return data;}function _templateObject2() {var data = _taggedTemplateLiteral(["\n  color: ", ";\n  stroke-linecap: round;\n"]);_templateObject2 = function _templateObject2() {return data;};return data;}function _templateObject() {var data = _taggedTemplateLiteral(["\n  position: relative;\n  width: ", ";\n  height: ", ";\n"]);_templateObject = function _templateObject() {return data;};return data;}import React from "react";
import { makeStyles } from "@material-ui/core";
import MuiCircularProgress from "@material-ui/core/CircularProgress";
import LinearProgress from "@material-ui/core/LinearProgress";
import styled from "styled-components";
var useStyles = makeStyles(function (theme) {return {
    bottom: {
      animationDuration: "550ms",
      left: 0,
      position: "absolute",
      top: 0
    },
    top: {
      color: theme.palette.colors.warning[500],
      position: "absolute",
      top: 0
    }
  };});
var Wrapper = styled.div(_templateObject(),

function (props) {return props.size ? "".concat(props.size, "px") : "100px";},
function (props) {return props.size ? "".concat(props.size, "px") : "100px";});

var CicrularProgress = styled(MuiCircularProgress)(_templateObject2(),
function (props) {return props.palette ?
  props.theme.palette[props.palette].main :
  props.theme.palette.colors.warning[500];});


// noinspection Stylelint
var LineProgress = styled(LinearProgress)(_templateObject3(),

function (props) {return props.palette ?
  props.theme.palette[props.palette].main :
  props.theme.palette.colors.warning[500];});


var ProgressTextIndicator = styled.div(_templateObject4(),
function (_ref) {var size = _ref.size;return size ? "calc(".concat(size, "/ 40 * 80%)") : "40px";},





function (props) {return props.palette ?
  props.theme.palette[props.palette].main :
  props.theme.palette.colors.warning[500];});

export default (function (_ref2) {var InnerComponent = _ref2.InnerComponent,value = _ref2.value,isLineProgress = _ref2.isLineProgress,props = _objectWithoutProperties(_ref2, ["InnerComponent", "value", "isLineProgress"]);
  var classes = useStyles(props);
  var renderProgress = function renderProgress() {
    if (isLineProgress) {
      return /*#__PURE__*/React.createElement(LineProgress, { variant: "determinate", value: value, palette: props.palette });
    } else
    {
      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/
      React.createElement(ProgressTextIndicator, { palette: props.palette, size: props.size || 48 }, InnerComponent ? InnerComponent : /*#__PURE__*/React.createElement(React.Fragment, null,
      value,
      "%")), /*#__PURE__*/
      React.createElement(CicrularProgress, { variant: "static", value: 100, palette: "primary", className: classes.top, size: props.size || 48, thickness: 3 }), /*#__PURE__*/
      React.createElement(CicrularProgress, _extends({}, props, { variant: "static", value: value, palette: props.palette, className: classes.bottom, size: props.size || 48, thickness: 3 })));
    }
  };
  return /*#__PURE__*/React.createElement(Wrapper, _extends({}, props), renderProgress());
});
//# sourceMappingURL=index.js.map