{"version":3,"file":"CircularProgressBar_5.ChHiDbr2.mjs","names":["useState","useRef"],"sources":["https:/framerusercontent.com/modules/esZ2nL3GLjEnxII0z3Ep/SMCC9bomsAcbgmiQylx7/CircularProgressBar_5.js"],"sourcesContent":["// Animated circular progress bar with number in center, configurable number and percent\nimport{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{useEffect,useRef,useState,startTransition}from\"react\";import{addPropertyControls,ControlType,useIsStaticRenderer}from\"framer\";import{useInView}from\"framer-motion\";/**\n * Animated Circular Progress Bar with Number\n *\n * @framerIntrinsicWidth 120\n * @framerIntrinsicHeight 120\n *\n * @framerSupportedLayoutWidth fixed\n * @framerSupportedLayoutHeight fixed\n */export default function CircularProgressBar(props){const{number=75,percent=80,strokeWidth=10,barColor=\"#0066FF\",trackColor=\"#F3F4F5\",numberColor=\"#131517\",font,animate=true,duration=1.2,style}=props;const size=100;const radius=(size-strokeWidth)/2;// For semi-circle, circumference is half\nconst semiCircumference=Math.PI*radius;const isStatic=useIsStaticRenderer();const[progress,setProgress]=useState(animate&&!isStatic?0:percent);const requestRef=useRef();const startTime=useRef();const containerRef=useRef(null);const inView=useInView(containerRef,{once:true,margin:\"-20%\"});// Calculate SVG rotation for start angle and direction\n// For semi-circle, startAngle is 180deg at the left, 0deg at the right\nconst rotation=(props.startAngle||0)-180;const directionSign=props.direction===\"counterclockwise\"?-1:1;// For semi-circle, dashOffset is based on semiCircumference\nconst dashOffset=directionSign*semiCircumference*(1-progress/100);useEffect(()=>{if(!animate||isStatic){startTransition(()=>setProgress(percent));return;}if(!inView)return;cancelAnimationFrame(requestRef.current);startTime.current=undefined;function animateStep(ts){if(!startTime.current)startTime.current=ts;const elapsed=(ts-startTime.current)/1e3;const t=Math.min(elapsed/duration,1);const val=percent*t;startTransition(()=>setProgress(val));if(t<1){requestRef.current=requestAnimationFrame(animateStep);}else{startTransition(()=>setProgress(percent));}}requestRef.current=requestAnimationFrame(animateStep);return()=>cancelAnimationFrame(requestRef.current);},[percent,animate,duration,isStatic,inView]);return /*#__PURE__*/_jsxs(\"div\",{ref:containerRef,style:{width:\"100%\",height:\"100%\",display:\"flex\",alignItems:\"center\",justifyContent:\"center\",position:\"relative\",...style},children:[/*#__PURE__*/_jsxs(\"svg\",{width:\"100%\",height:\"100%\",viewBox:\"0 0 100 100\",style:{position:\"absolute\",top:0,left:0,transform:`rotate(${rotation}deg)`},preserveAspectRatio:\"xMidYMid meet\",children:[/*#__PURE__*/_jsx(\"path\",{d:`M ${50-radius},50 A ${radius},${radius} 0 0 1 ${50+radius},50`,stroke:trackColor,strokeWidth:strokeWidth,fill:\"none\",strokeLinecap:\"round\"}),/*#__PURE__*/_jsx(\"path\",{d:`M ${50-radius},50 A ${radius},${radius} 0 0 1 ${50+radius},50`,stroke:barColor,strokeWidth:strokeWidth,fill:\"none\",strokeDasharray:semiCircumference,strokeDashoffset:dashOffset,strokeLinecap:\"round\",style:{transition:animate&&!isStatic?undefined:\"stroke-dashoffset 0.4s\"}})]}),/*#__PURE__*/_jsxs(\"div\",{style:{position:\"relative\",zIndex:1,width:\"100%\",display:\"flex\",flexDirection:\"column\",alignItems:\"center\",justifyContent:\"flex-start\",marginTop:24},children:[/*#__PURE__*/_jsxs(\"span\",{style:{color:numberColor,display:\"inline-block\",width:\"100%\",textAlign:\"center\",marginBottom:8,...font,transform:`translate(${props.numberOffsetX||0}px, ${(props.numberOffsetY||0)-10}px)`},children:[\"+\",number,/*#__PURE__*/_jsx(\"span\",{style:{fontSize:\"0.7em\",marginLeft:2},children:\"%\"})]}),props.label&&/*#__PURE__*/_jsx(\"span\",{style:{color:props.labelColor,marginTop:4,width:\"100%\",textAlign:\"center\",...props.labelFont},children:props.label})]})]});}addPropertyControls(CircularProgressBar,{number:{type:ControlType.Number,title:\"Number\",defaultValue:75,min:0,max:1e4,step:1},percent:{type:ControlType.Number,title:\"Percent\",defaultValue:80,min:0,max:100,step:1,unit:\"%\"},strokeWidth:{type:ControlType.Number,title:\"Bar Width\",defaultValue:10,min:2,max:40,step:1,unit:\"px\"},barColor:{type:ControlType.Color,title:\"Bar Color\",defaultValue:\"#0066FF\"},trackColor:{type:ControlType.Color,title:\"Track Color\",defaultValue:\"#F3F4F5\"},numberColor:{type:ControlType.Color,title:\"Number Color\",defaultValue:\"#131517\"},font:{type:ControlType.Font,title:\"Font\",controls:\"extended\",defaultFontType:\"sans-serif\",defaultValue:{fontSize:\"32px\",variant:\"Bold\",letterSpacing:\"-0.01em\",lineHeight:\"1em\"}},animate:{type:ControlType.Boolean,title:\"Animate\",defaultValue:true,enabledTitle:\"On\",disabledTitle:\"Off\"},duration:{type:ControlType.Number,title:\"Duration\",defaultValue:1.2,min:.2,max:5,step:.1,unit:\"s\",hidden:({animate})=>!animate},startAngle:{type:ControlType.Number,title:\"Start Angle\",defaultValue:0,min:0,max:360,step:1,unit:\"\\xb0\"},direction:{type:ControlType.Enum,title:\"Direction\",options:[\"clockwise\",\"counterclockwise\"],optionTitles:[\"Clockwise\",\"Counterclockwise\"],defaultValue:\"clockwise\",displaySegmentedControl:true},label:{type:ControlType.String,title:\"Label\",defaultValue:\"\",placeholder:\"Label text...\"},labelFont:{type:ControlType.Font,title:\"Label Font\",controls:\"extended\",defaultFontType:\"sans-serif\",defaultValue:{fontSize:\"15px\",variant:\"Medium\",letterSpacing:\"-0.01em\",lineHeight:\"1.3em\"},hidden:({label})=>!label},labelColor:{type:ControlType.Color,title:\"Label Color\",defaultValue:\"#7B818E\",hidden:({label})=>!label},numberOffsetY:{type:ControlType.Number,title:\"Number Y Offset\",defaultValue:-10,min:-50,max:50,step:1,unit:\"px\"},numberOffsetX:{type:ControlType.Number,title:\"Number X Offset\",defaultValue:0,min:-50,max:50,step:1,unit:\"px\"}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"CircularProgressBar\",\"slots\":[],\"annotations\":{\"framerIntrinsicWidth\":\"120\",\"framerSupportedLayoutHeight\":\"fixed\",\"framerContractVersion\":\"1\",\"framerSupportedLayoutWidth\":\"fixed\",\"framerIntrinsicHeight\":\"120\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./CircularProgressBar_5.map"],"mappings":"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"}