{"version":3,"file":"ProgressAnimation_1_1.DW3mO2Pb.mjs","names":["useState","useRef"],"sources":["https:/framerusercontent.com/modules/N7Tc9IfHvXIXSXK80B67/wUxJZgXOuJI5wgGrar3b/ProgressAnimation_1_1.js"],"sourcesContent":["import{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{useEffect,useState,useRef}from\"react\";import{addPropertyControls,ControlType}from\"framer\";export default function ProgressAnimation(props){const{backgroundColor,progressColor,timeAnimation,barHeight}=props;const[width,setWidth]=useState(0);const animationRef=useRef(null);const startTimeRef=useRef(null);useEffect(()=>{setWidth(0);startTimeRef.current=null;const animate=timestamp=>{if(!startTimeRef.current)startTimeRef.current=timestamp;const elapsed=timestamp-startTimeRef.current;const duration=timeAnimation*1e3;const progress=Math.min(elapsed/duration*100,100);setWidth(progress);if(progress<100){animationRef.current=requestAnimationFrame(animate);}else{// restart automatically\nstartTimeRef.current=null;setTimeout(()=>requestAnimationFrame(animate),200);}};animationRef.current=requestAnimationFrame(animate);return()=>{if(animationRef.current)cancelAnimationFrame(animationRef.current);};},[timeAnimation]);const styles={container:{width:\"100%\",height:`${barHeight}px`,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}};return /*#__PURE__*/_jsxs(\"div\",{style:styles.container,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 (s)\",type:ControlType.Number,defaultValue:3,min:.5,max:60,step:.1},barHeight:{title:\"Bar Height (px)\",type:ControlType.Number,defaultValue:4,min:1,max:20,step:1}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"ProgressAnimation\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./ProgressAnimation_1_1.map"],"mappings":"gMAA0J,SAAwB,EAAkB,EAAM,CAAC,GAAK,CAAC,kBAAgB,gBAAc,gBAAc,aAAW,EAAW,CAAC,EAAM,GAAUA,EAAS,EAAE,CAAO,EAAaC,EAAO,KAAK,CAAO,EAAaA,EAAO,KAAK,CAAC,MAAc,CAAC,EAAS,EAAE,CAAC,EAAa,QAAQ,KAAK,IAAM,EAAQ,GAAW,CAAC,AAAyB,EAAa,UAAQ,EAAU,IAAM,EAAQ,EAAU,EAAa,QAAc,EAAS,EAAc,IAAU,EAAS,KAAK,IAAI,EAAQ,EAAS,IAAI,IAAI,CAAC,EAAS,EAAS,CAAI,EAAS,IAAK,EAAa,QAAQ,sBAAsB,EAAQ,EAC9sB,EAAa,QAAQ,KAAK,eAAe,sBAAsB,EAAQ,CAAC,IAAI,GAAwD,MAApD,GAAa,QAAQ,sBAAsB,EAAQ,KAAW,CAAI,EAAa,SAAQ,qBAAqB,EAAa,QAAQ,GAAK,CAAC,EAAc,CAAC,CAAC,IAAM,EAAO,CAAC,UAAU,CAAC,MAAM,OAAO,OAAO,GAAG,EAAU,IAAI,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,CAAC,CAAC,OAAoB,EAAM,MAAM,CAAC,MAAM,EAAO,UAAU,SAAS,CAAc,EAAK,MAAM,CAAC,MAAM,EAAO,WAAW,CAAC,CAAc,EAAK,MAAM,CAAC,MAAM,EAAO,SAAS,CAAC,CAAC,CAAC,CAAC,kBADroB,IAA6C,IAAoD,CACsiB,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,qBAAqB,KAAK,EAAY,OAAO,aAAa,EAAE,IAAI,GAAG,IAAI,GAAG,KAAK,GAAG,CAAC,UAAU,CAAC,MAAM,kBAAkB,KAAK,EAAY,OAAO,aAAa,EAAE,IAAI,EAAE,IAAI,GAAG,KAAK,EAAE,CAAC,CAAC"}