react-circular-gradient-progress
Version:
Display progress in a circle fashion
40 lines (39 loc) • 4.3 kB
JavaScript
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
var react_1 = __importDefault(require("react"));
function id() {
return '_' + Math.random().toString(36).substr(2, 9);
}
var GradientCircularProgress = function (_a) {
var size = _a.size, progress = _a.progress, _b = _a.strokeWidth, strokeWidth = _b === void 0 ? 6 : _b, emptyColor = _a.emptyColor, startColor = _a.startColor, endColor = _a.endColor, middleColor = _a.middleColor, _c = _a.withSnail, withSnail = _c === void 0 ? false : _c, classes = _a.classes, children = _a.children;
var DIAMETER = 50;
var WIDTH = DIAMETER + strokeWidth;
var firstHalfProg = progress > DIAMETER ? 1 : progress / DIAMETER;
var secondHalfProg = progress <= DIAMETER ? 0 : (progress - DIAMETER) / DIAMETER;
var halfCircumference = ((Math.PI * 2) * (DIAMETER / 2) / 2);
var firstHalfGradientId = id();
var secondHalfGradientId = id();
return (react_1.default.createElement("div", { className: ["CircularProgress", classes === null || classes === void 0 ? void 0 : classes.indicator.container].join(" "), style: { width: size + "px", height: size + "px", } },
react_1.default.createElement("svg", { viewBox: "0 0 " + WIDTH + " " + WIDTH },
react_1.default.createElement("defs", null,
react_1.default.createElement("linearGradient", { id: firstHalfGradientId, x1: "50%", y1: "0%", x2: "0%", y2: "100%" },
react_1.default.createElement("stop", { offset: "0%", stopColor: startColor }),
react_1.default.createElement("stop", { offset: "90%", stopColor: middleColor })),
react_1.default.createElement("linearGradient", { id: secondHalfGradientId, x1: "0%", y1: "0%", x2: "50%", y2: "100%" },
react_1.default.createElement("stop", { offset: "0%", stopColor: endColor }),
react_1.default.createElement("stop", { offset: "90%", stopColor: middleColor }))),
react_1.default.createElement("path", { className: classes === null || classes === void 0 ? void 0 : classes.indicator.empty, fill: "none", stroke: emptyColor, d: "\n M " + strokeWidth / 2 + " " + WIDTH / 2 + "\n a " + DIAMETER / 2 + " " + DIAMETER / 2 + " 0 1 1 " + DIAMETER + " 0\n a " + DIAMETER / 2 + " " + DIAMETER / 2 + " 0 1 1 -" + DIAMETER + " 0\n ", strokeWidth: strokeWidth }),
react_1.default.createElement("path", { className: classes === null || classes === void 0 ? void 0 : classes.indicator.progression, fill: "none", stroke: "url(#" + firstHalfGradientId + ")", strokeDasharray: firstHalfProg * halfCircumference + "," + halfCircumference, strokeLinecap: "round", d: "\n M " + WIDTH / 2 + " " + strokeWidth / 2 + "\n a " + DIAMETER / 2 + " " + DIAMETER / 2 + " 0 1 1 0 " + DIAMETER + "\n ", strokeWidth: strokeWidth }),
progress >= 50 &&
react_1.default.createElement("path", { className: classes === null || classes === void 0 ? void 0 : classes.indicator.progression, fill: "none", stroke: "url(#" + secondHalfGradientId + ")", strokeDasharray: secondHalfProg * halfCircumference + "," + halfCircumference, strokeLinecap: "round", d: "\n M " + WIDTH / 2 + " " + (WIDTH - strokeWidth / 2) + "\n a " + DIAMETER / 2 + " " + DIAMETER / 2 + " 0 0 1 0 -" + DIAMETER + "\n ", strokeWidth: strokeWidth }),
withSnail &&
react_1.default.createElement("circle", { className: classes === null || classes === void 0 ? void 0 : classes.snail, cx: WIDTH / 2, cy: strokeWidth / 2, r: strokeWidth / 4, fill: "white", transform: "rotate(" + 360 * (progress / 100) + ", " + WIDTH / 2 + ", " + WIDTH / 2 + ")" })),
children ? children : (react_1.default.createElement("div", { style: { fontSize: size / 6 }, className: ["textContent"].join(" ") },
react_1.default.createElement("span", { className: ["text"].join(" ") },
progress,
"%")))));
};
exports.default = GradientCircularProgress;