import { jsx as _jsx } from "react/jsx-runtime";
import { useEffect, useRef, useState } from "react";
const Lineloader = (props) => {
    const timer = useRef(undefined);
    const [time, setTime] = useState(0);
    const unit = props.timePeriod / 2;
    useEffect(() => {
        if (!timer.current) {
            timer.current = setInterval(() => {
                setTime((t) => t + 50);
            }, 50);
        }
        return () => { clearInterval(timer.current); };
    }, []);
    return (_jsx("div", { style: { width: props.width + "px", height: `${props.height}px`, borderRadius: "10px", background: `linear-gradient(to right, ${props.color.left},${props.color.right})`, position: "relative" }, children: _jsx("div", { style: { position: "absolute", zIndex: 1, transition: `width ${unit / 1000}s`, width: ((Math.floor(time / unit)) % 2 == 0 ? 0 : props.width) + "px", height: `${props.height}px`, backgroundColor: props.color.mask, right: 0 } }) }));
};
export default Lineloader;
//# sourceMappingURL=Lineloader.js.map