@arnonsang/react-loading
Version:
A highly customizable React loading component library with 17 beautiful animations, and flexible children API
110 lines (109 loc) • 9.06 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"));
require("./index.css");
var constants_1 = require("./types/constants");
var Loading = function (_a) {
var _b = _a.variant, variant = _b === void 0 ? 'spinner' : _b, _c = _a.size, size = _c === void 0 ? 'md' : _c, _d = _a.themeColor, themeColor = _d === void 0 ? 'blue' : _d, color = _a.color, width = _a.width, height = _a.height, _e = _a.delay, delay = _e === void 0 ? 0 : _e, _f = _a.text, text = _f === void 0 ? 'Loading...' : _f, _g = _a.fullPage, fullPage = _g === void 0 ? false : _g, _h = _a.hideText, hideText = _h === void 0 ? false : _h, _j = _a.className, className = _j === void 0 ? '' : _j;
var finalColor = color || constants_1.themeColors[themeColor];
var containerStyle = {
'--loading-color': finalColor,
animationDelay: "".concat(delay, "ms")
};
// Apply custom dimensions if provided
if (width) {
containerStyle.width = typeof width === 'number' ? "".concat(width, "px") : width;
}
if (height) {
containerStyle.height = typeof height === 'number' ? "".concat(height, "px") : height;
}
var renderLoadingContent = function () {
switch (variant) {
case 'spinner':
return react_1.default.createElement("div", { className: "loading-spinner loading-".concat(size) });
case 'dots':
return (react_1.default.createElement("div", { className: "loading-dots loading-".concat(size) },
react_1.default.createElement("div", { className: "loading-dot" }),
react_1.default.createElement("div", { className: "loading-dot" }),
react_1.default.createElement("div", { className: "loading-dot" })));
case 'pulse':
return react_1.default.createElement("div", { className: "loading-pulse loading-".concat(size) });
case 'skeleton':
return (react_1.default.createElement("div", { className: "loading-skeleton loading-".concat(size) },
react_1.default.createElement("div", { className: "skeleton-line" }),
react_1.default.createElement("div", { className: "skeleton-line", style: { width: '83%' } }),
react_1.default.createElement("div", { className: "skeleton-line", style: { width: '66%' } })));
case 'bars':
return (react_1.default.createElement("div", { className: "loading-bars loading-".concat(size) },
react_1.default.createElement("div", { className: "bar" }),
react_1.default.createElement("div", { className: "bar" }),
react_1.default.createElement("div", { className: "bar" }),
react_1.default.createElement("div", { className: "bar" }),
react_1.default.createElement("div", { className: "bar" })));
case 'bubbles':
return (react_1.default.createElement("div", { className: "loading-bubbles loading-".concat(size) },
react_1.default.createElement("div", { className: "bubble", style: { left: '20%', top: '20%', animationDelay: '0s' } }),
react_1.default.createElement("div", { className: "bubble", style: { left: '60%', top: '20%', animationDelay: '0.2s' } }),
react_1.default.createElement("div", { className: "bubble", style: { left: '20%', top: '60%', animationDelay: '0.4s' } }),
react_1.default.createElement("div", { className: "bubble", style: { left: '60%', top: '60%', animationDelay: '0.6s' } })));
case 'cylon':
return (react_1.default.createElement("div", { className: "loading-cylon loading-".concat(size) },
react_1.default.createElement("div", { className: "cylon-line" })));
case 'spinningBubbles':
return (react_1.default.createElement("div", { className: "loading-spinning-bubbles loading-".concat(size) },
react_1.default.createElement("div", { className: "bubble", style: { transform: 'rotate(0deg) translateX(1.5em)' } }),
react_1.default.createElement("div", { className: "bubble", style: { transform: 'rotate(120deg) translateX(1.5em)' } }),
react_1.default.createElement("div", { className: "bubble", style: { transform: 'rotate(240deg) translateX(1.5em)' } })));
case 'ripple':
return (react_1.default.createElement("div", { className: "loading-ripple loading-".concat(size) },
react_1.default.createElement("div", { className: "ripple-circle", style: { animationDelay: '0s' } }),
react_1.default.createElement("div", { className: "ripple-circle", style: { animationDelay: '0.5s' } }),
react_1.default.createElement("div", { className: "ripple-circle", style: { animationDelay: '1s' } })));
case 'wave':
return (react_1.default.createElement("div", { className: "loading-wave loading-".concat(size) },
react_1.default.createElement("div", { className: "wave-dot", style: { animationDelay: '0s' } }),
react_1.default.createElement("div", { className: "wave-dot", style: { animationDelay: '0.1s' } }),
react_1.default.createElement("div", { className: "wave-dot", style: { animationDelay: '0.2s' } }),
react_1.default.createElement("div", { className: "wave-dot", style: { animationDelay: '0.3s' } }),
react_1.default.createElement("div", { className: "wave-dot", style: { animationDelay: '0.4s' } })));
case 'orbit':
return (react_1.default.createElement("div", { className: "loading-orbit loading-".concat(size) },
react_1.default.createElement("div", { className: "orbit-center" }),
react_1.default.createElement("div", { className: "orbit-dot", style: { animationDelay: '0s', transform: 'rotate(0deg) translateX(1.5em)' } }),
react_1.default.createElement("div", { className: "orbit-dot", style: { animationDelay: '0.3s', transform: 'rotate(120deg) translateX(1.5em)' } }),
react_1.default.createElement("div", { className: "orbit-dot", style: { animationDelay: '0.6s', transform: 'rotate(240deg) translateX(1.5em)' } })));
case 'bounce':
return (react_1.default.createElement("div", { className: "loading-bounce loading-".concat(size) },
react_1.default.createElement("div", { className: "bounce-ball" }),
react_1.default.createElement("div", { className: "bounce-shadow" })));
case 'snake':
return (react_1.default.createElement("div", { className: "loading-snake loading-".concat(size) }, Array.from({ length: 8 }, function (_, i) { return (react_1.default.createElement("div", { key: i, className: "snake-segment", style: { animationDelay: "".concat(i * 0.1, "s") } })); })));
case 'grid':
return (react_1.default.createElement("div", { className: "loading-grid loading-".concat(size) }, Array.from({ length: 9 }, function (_, i) { return (react_1.default.createElement("div", { key: i, className: "grid-square", style: { animationDelay: "".concat(i * 0.1, "s") } })); })));
case 'heart':
return (react_1.default.createElement("div", { className: "loading-heart loading-".concat(size) },
react_1.default.createElement("div", { className: "heart-shape" })));
case 'spiral':
return (react_1.default.createElement("div", { className: "loading-spiral loading-".concat(size) }, Array.from({ length: 6 }, function (_, i) { return (react_1.default.createElement("div", { key: i, className: "spiral-dot", style: {
animationDelay: "".concat(i * 0.2, "s"),
transform: "rotate(".concat(i * 60, "deg) translateX(1.2em)")
} })); })));
case 'blank':
return null;
default:
return react_1.default.createElement("div", { className: "loading-spinner loading-".concat(size) });
}
};
var content = (react_1.default.createElement("div", { className: "loading-container ".concat(className), style: containerStyle },
react_1.default.createElement("div", { className: "loading-content" },
renderLoadingContent(),
!hideText && variant !== 'blank' && (react_1.default.createElement("div", { className: "loading-text" }, text)))));
if (fullPage) {
return (react_1.default.createElement("div", { className: "loading-fullpage" }, content));
}
return content;
};
exports.default = Loading;