{
  "version": 3,
  "sources": ["ssg:https://framerusercontent.com/modules/klJkgEiCoY7y0p1z8edh/R80JVJwHvkbyymc96xoz/CircleProgress.js"],
  "sourcesContent": ["import{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{useState,useEffect,useRef}from\"react\";import{motion}from\"framer-motion\";import{addPropertyControls,ControlType}from\"framer\";export function CircleProgress(props){const{percentage,color,counter,replay}=props;const[isVisible,setIsVisible]=useState(false);const[strokeOffset,setStrokeOffset]=useState(302);const[replayKey,setReplayKey]=useState(0);const containerRef=useRef(null);useEffect(()=>{const observer=new IntersectionObserver(entries=>{const entry=entries[0];setIsVisible(entry.isIntersecting);});if(containerRef.current){observer.observe(containerRef.current);}return()=>{if(containerRef.current){observer.unobserve(containerRef.current);}};},[]);useEffect(()=>{if(isVisible){setStrokeOffset(302-percentage/100*302);if(replay){setReplayKey(prevKey=>prevKey+1);}}},[isVisible,percentage,replay]);const handleScroll=()=>{if(!isVisible){setIsVisible(true);}};useEffect(()=>{window.addEventListener(\"scroll\",handleScroll);return()=>{window.removeEventListener(\"scroll\",handleScroll);};},[]);return /*#__PURE__*/_jsxs(\"div\",{style:{position:\"relative\",width:\"96px\",height:\"96px\",textAlign:\"center\"},ref:containerRef,children:[/*#__PURE__*/_jsxs(\"svg\",{viewBox:\"0 0 96 96\",children:[/*#__PURE__*/_jsx(\"circle\",{className:\"progress-ring__circle\",stroke:\"transparent\",strokeWidth:\"6\",fill:\"transparent\",r:\"44\",cx:\"48\",cy:\"48\"}),/*#__PURE__*/_jsx(motion.circle,{className:\"progress-ring__circle progress-ring__circle--progress\",stroke:color,strokeWidth:\"6\",fill:\"transparent\",r:\"44\",cx:\"48\",cy:\"48\",strokeDasharray:\"302\",strokeDashoffset:strokeOffset,animate:{strokeDashoffset:strokeOffset},transition:{duration:3},style:{strokeLinecap:\"round\",transform:\"rotate(-90deg)\",transformOrigin:\"50% 50%\"}},replayKey)]}),/*#__PURE__*/_jsx(motion.div,{style:{position:\"absolute\",top:\"50%\",left:\"50%\",transform:\"translate(-50%, -50%)\"},children:counter})]});}CircleProgress.defaultProps={percentage:100,color:\"#1e90ff\",counter:\"Counter Component\",replay:false};addPropertyControls(CircleProgress,{percentage:{type:ControlType.Number,title:\"Percentage\",min:0,max:100,step:1},color:{type:ControlType.Color,title:\"Color\"},counter:{type:ControlType.ComponentInstance,title:\"Counter\"},replay:{type:ControlType.Boolean,title:\"Replay\",defaultValue:false,enabledTitle:\"Yes\",disabledTitle:\"No\"}});\nexport const __FramerMetadata__ = {\"exports\":{\"CircleProgress\":{\"type\":\"reactComponent\",\"name\":\"CircleProgress\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./CircleProgress.map"],
  "mappings": "qKAAmM,SAASA,EAAeC,EAAM,CAAC,GAAK,CAAC,WAAAC,EAAW,MAAAC,EAAM,QAAAC,EAAQ,OAAAC,CAAM,EAAEJ,EAAW,CAACK,EAAUC,CAAY,EAAEC,EAAS,EAAK,EAAO,CAACC,EAAaC,CAAe,EAAEF,EAAS,GAAG,EAAO,CAACG,EAAUC,CAAY,EAAEJ,EAAS,CAAC,EAAQK,EAAaC,EAAO,IAAI,EAAEC,EAAU,IAAI,CAAC,IAAMC,EAAS,IAAI,qBAAqBC,GAAS,CAAC,IAAMC,EAAMD,EAAQ,CAAC,EAAEV,EAAaW,EAAM,cAAc,CAAE,CAAC,EAAE,OAAGL,EAAa,SAASG,EAAS,QAAQH,EAAa,OAAO,EAAS,IAAI,CAAIA,EAAa,SAASG,EAAS,UAAUH,EAAa,OAAO,CAAG,CAAE,EAAE,CAAC,CAAC,EAAEE,EAAU,IAAI,CAAIT,IAAWI,EAAgB,IAAIR,EAAW,IAAI,GAAG,EAAKG,GAAQO,EAAaO,GAASA,EAAQ,CAAC,EAAI,EAAE,CAACb,EAAUJ,EAAWG,CAAM,CAAC,EAAE,IAAMe,EAAa,IAAI,CAAKd,GAAWC,EAAa,EAAI,CAAG,EAAE,OAAAQ,EAAU,KAAKM,EAAO,iBAAiB,SAASD,CAAY,EAAQ,IAAI,CAACC,EAAO,oBAAoB,SAASD,CAAY,CAAE,GAAI,CAAC,CAAC,EAAsBE,EAAM,MAAM,CAAC,MAAM,CAAC,SAAS,WAAW,MAAM,OAAO,OAAO,OAAO,UAAU,QAAQ,EAAE,IAAIT,EAAa,SAAS,CAAcS,EAAM,MAAM,CAAC,QAAQ,YAAY,SAAS,CAAcC,EAAK,SAAS,CAAC,UAAU,wBAAwB,OAAO,cAAc,YAAY,IAAI,KAAK,cAAc,EAAE,KAAK,GAAG,KAAK,GAAG,IAAI,CAAC,EAAeA,EAAKC,EAAO,OAAO,CAAC,UAAU,wDAAwD,OAAOrB,EAAM,YAAY,IAAI,KAAK,cAAc,EAAE,KAAK,GAAG,KAAK,GAAG,KAAK,gBAAgB,MAAM,iBAAiBM,EAAa,QAAQ,CAAC,iBAAiBA,CAAY,EAAE,WAAW,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC,cAAc,QAAQ,UAAU,iBAAiB,gBAAgB,SAAS,CAAC,EAAEE,CAAS,CAAC,CAAC,CAAC,EAAeY,EAAKC,EAAO,IAAI,CAAC,MAAM,CAAC,SAAS,WAAW,IAAI,MAAM,KAAK,MAAM,UAAU,uBAAuB,EAAE,SAASpB,CAAO,CAAC,CAAC,CAAC,CAAC,CAAE,CAACJ,EAAe,aAAa,CAAC,WAAW,IAAI,MAAM,UAAU,QAAQ,oBAAoB,OAAO,EAAK,EAAEyB,EAAoBzB,EAAe,CAAC,WAAW,CAAC,KAAK0B,EAAY,OAAO,MAAM,aAAa,IAAI,EAAE,IAAI,IAAI,KAAK,CAAC,EAAE,MAAM,CAAC,KAAKA,EAAY,MAAM,MAAM,OAAO,EAAE,QAAQ,CAAC,KAAKA,EAAY,kBAAkB,MAAM,SAAS,EAAE,OAAO,CAAC,KAAKA,EAAY,QAAQ,MAAM,SAAS,aAAa,GAAM,aAAa,MAAM,cAAc,IAAI,CAAC,CAAC",
  "names": ["CircleProgress", "props", "percentage", "color", "counter", "replay", "isVisible", "setIsVisible", "ye", "strokeOffset", "setStrokeOffset", "replayKey", "setReplayKey", "containerRef", "pe", "ue", "observer", "entries", "entry", "prevKey", "handleScroll", "window", "u", "p", "motion", "addPropertyControls", "ControlType"]
}