{"version":3,"file":"ProgressAnimation_1.CA8DFCei.mjs","names":["useState","useRef"],"sources":["https:/framerusercontent.com/modules/xjoB22xLFvb8iHk0ba5y/y9rh5KDdRhk4QkNSPHn2/ProgressAnimation_1.js"],"sourcesContent":["import{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{useEffect,useRef,useState}from\"react\";import{addPropertyControls,ControlType}from\"framer\";export default function ProgressAnimation(props){const{backgroundColor,progressColor,timeAnimation}=props;const[width,setWidth]=useState(0);const[isVisible,setIsVisible]=useState(false);const containerRef=useRef(null);// Intersection Observer to detect visibility\nuseEffect(()=>{const observer=new IntersectionObserver(([entry])=>{setIsVisible(entry.isIntersecting);},{threshold:.1});if(containerRef.current){observer.observe(containerRef.current);}return()=>{if(containerRef.current){observer.unobserve(containerRef.current);}};},[]);// Progress animation only when visible\nuseEffect(()=>{if(!isVisible)return;const interval=setInterval(()=>{setWidth(prevWidth=>prevWidth>=100?0:prevWidth+1);},timeAnimation);return()=>clearInterval(interval);},[isVisible,timeAnimation]);const styles={container:{width:\"100%\",height:\"100%\",position:\"relative\",overflow:\"hidden\"},background:{position:\"absolute\",top:0,left:0,width:\"100%\",height:\"100%\",background:backgroundColor},progress:{position:\"absolute\",top:0,left:0,height:\"100%\",width:`${width}%`,background:progressColor,transition:`width ${timeAnimation}ms linear`}};return /*#__PURE__*/_jsxs(\"div\",{style:styles.container,ref:containerRef,children:[/*#__PURE__*/_jsx(\"div\",{style:styles.background}),/*#__PURE__*/_jsx(\"div\",{style:styles.progress})]});}addPropertyControls(ProgressAnimation,{backgroundColor:{title:\"Background Color\",type:ControlType.Color,defaultValue:\"rgba(0, 0, 0, 0.12)\"},progressColor:{title:\"Progress Color\",type:ControlType.Color,defaultValue:\"black\"},timeAnimation:{title:\"Animation Time (ms)\",type:ControlType.Number,defaultValue:90,min:10,max:1e3,step:10}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"ProgressAnimation\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./ProgressAnimation_1.map"],"mappings":"gMAA0J,SAAwB,EAAkB,EAAM,CAAC,GAAK,CAAC,kBAAgB,gBAAc,iBAAe,EAAW,CAAC,EAAM,GAAUA,EAAS,EAAE,CAAM,CAAC,EAAU,GAAcA,EAAS,GAAM,CAAO,EAAaC,EAAO,KAAK,CACnX,MAAc,CAAC,IAAM,EAAS,IAAI,sBAAsB,CAAC,KAAS,CAAC,EAAa,EAAM,eAAe,EAAG,CAAC,UAAU,GAAG,CAAC,CAAkE,OAA9D,EAAa,SAAS,EAAS,QAAQ,EAAa,QAAQ,KAAY,CAAI,EAAa,SAAS,EAAS,UAAU,EAAa,QAAQ,GAAM,EAAE,CAAC,CAC9Q,MAAc,CAAC,GAAG,CAAC,EAAU,OAAO,IAAM,EAAS,gBAAgB,CAAC,EAAS,GAAW,GAAW,IAAI,EAAE,EAAU,EAAE,EAAG,EAAc,CAAC,UAAU,cAAc,EAAS,EAAG,CAAC,EAAU,EAAc,CAAC,CAAC,IAAM,EAAO,CAAC,UAAU,CAAC,MAAM,OAAO,OAAO,OAAO,SAAS,WAAW,SAAS,SAAS,CAAC,WAAW,CAAC,SAAS,WAAW,IAAI,EAAE,KAAK,EAAE,MAAM,OAAO,OAAO,OAAO,WAAW,EAAgB,CAAC,SAAS,CAAC,SAAS,WAAW,IAAI,EAAE,KAAK,EAAE,OAAO,OAAO,MAAM,GAAG,EAAM,GAAG,WAAW,EAAc,WAAW,SAAS,EAAc,WAAW,CAAC,CAAC,OAAoB,EAAM,MAAM,CAAC,MAAM,EAAO,UAAU,IAAI,EAAa,SAAS,CAAc,EAAK,MAAM,CAAC,MAAM,EAAO,WAAW,CAAC,CAAc,EAAK,MAAM,CAAC,MAAM,EAAO,SAAS,CAAC,CAAC,CAAC,CAAC,kBAFxpB,IAA6C,IAAoD,CAEyjB,EAAoB,EAAkB,CAAC,gBAAgB,CAAC,MAAM,mBAAmB,KAAK,EAAY,MAAM,aAAa,sBAAsB,CAAC,cAAc,CAAC,MAAM,iBAAiB,KAAK,EAAY,MAAM,aAAa,QAAQ,CAAC,cAAc,CAAC,MAAM,sBAAsB,KAAK,EAAY,OAAO,aAAa,GAAG,IAAI,GAAG,IAAI,IAAI,KAAK,GAAG,CAAC,CAAC"}