@worktif/purei
Version:
Work TIF Material UI Theme Provider and Customization Suite for React applications with dark mode support and dynamic color schemes
75 lines • 3.43 kB
JavaScript
;
/*
* Work TIF, Raman Marozau.
* All rights reserved.
* Copyright(c), 2025-present.
*
* Business Source License 1.1
*
* Copyright (C) 2025 Raman Marozau, raman@worktif.com
* Use of this software is governed by the Business Source License included in the LICENSE file and at www.mariadb.com/bsl11.
*
* Change Date: Never
* On the date above, in accordance with the Business Source License, use of this software will be governed by the open source license specified in the LICENSE file.
* Additional Use Grant: Free for personal and non-commercial research use only.
*
*
* SPDX-License-Identifier: BUSL-1.1
*/
Object.defineProperty(exports, "__esModule", { value: true });
exports.CustomLinearDialogLoader = exports.CustomLinearLoader = void 0;
const material_1 = require("@mui/material");
const system_1 = require("@mui/system");
/**
* CustomLinearLoader is a styled component that extends the LinearProgress component from Material-UI.
* It customizes the appearance of the linear loader by setting the height, borderRadius, background color,
* and defining a linear gradient animation for the progress bar.
*
* @param {LinearProgressProps} props - The props for the LinearProgress component
* @returns {React.Element} A styled LinearProgress component with custom appearance
*/
exports.CustomLinearLoader = (0, system_1.styled)(material_1.LinearProgress)(({ theme }) => ({
height: 4,
borderRadius: 4,
backgroundColor: "#F0F5F9", // Progress bar background
[`& .${material_1.linearProgressClasses.bar}`]: {
borderRadius: 4,
background: "linear-gradient(90deg, #2F4858, #33658A, #86BBD8)", // Palette based gradient
animation: "$loadingAnimation 1.5s linear infinite", // Motion animation
},
"@keyframes loadingAnimation": {
"0%": { backgroundPosition: "0% 50%" },
"100%": { backgroundPosition: "100% 50%" },
},
}));
/**
* CustomLinearDialogLoader is a styled wrapper component for the Material-UI LinearProgress component.
* It is customized to feature a gradient progress bar with a rounded border and a smooth animation effect.
*
* Characteristics:
* - Height is set to 4 pixels with a border radius of 4 pixels.
* - Background color of the progress bar's container is transparent.
* - The progress bar (`bar` class) features a gradient that animates smoothly across a defined keyframe sequence.
* - A custom linear gradient is applied as the background of the progress bar.
* - Includes @keyframes for continuous seamless left-to-right animation.
*
* This component is designed to be used in situations where a visually enhanced linear progress loader is required.
* It leverages Material-UI theming and classes for styling consistency.
*
* @type {StyledComponent<LinearProgressProps>}
*/
exports.CustomLinearDialogLoader = (0, system_1.styled)(material_1.LinearProgress)(({ theme }) => ({
height: 4,
borderRadius: 4,
backgroundColor: "transparent",
[`& .${material_1.linearProgressClasses.bar}`]: {
borderRadius: 4,
background: "linear-gradient(90deg, #2F4858, #33658A, #86BBD8)", // Palette based gradient
animation: "$loadingAnimation 1.5s linear infinite", // Motion animation
},
"@keyframes loadingAnimation": {
'0%': { backgroundPosition: "0% 50%" },
"100%": { backgroundPosition: "100% 50%" },
},
}));
//# sourceMappingURL=index.js.map