{"version":3,"sources":["components/CircularProgress.jsx","App.jsx","index.jsx"],"names":["CircularProgress","duration","circumference","radius","Math","PI","circleRef","useRef","textRef","circleAnimation","useEffect","percent","current","animate","strokeDashoffset","easing","iterations","pause","cancel","frame","textAnimation","progress","currentTime","textContent","toFixed","requestAnimationFrame","cancelAnimationFrame","viewBox","className","cx","cy","r","fill","strokeWidth","ref","x","y","dominantBaseline","textAnchor","strokeDasharray","strokeLinecap","onClick","play","App","ReactDOM","render","StrictMode","document","getElementById"],"mappings":"yKAqGeA,G,KAnGU,SAAC,GAAkB,IAAhBC,EAAe,EAAfA,SAEpBC,EAAgBC,GAAaC,KAAKC,GAElCC,EAAYC,mBACZC,EAAUD,mBAEZE,EAAkBF,mBAEtBG,qBAAU,WACR,IAAmBC,EAenB,OAZAF,EAAgBG,QAAUN,EAAUM,QAAQC,QAC1C,CAAC,CAAEC,kBAJcH,EAIc,EAH/BT,EAAiBS,EAAU,IAAOT,IAGG,CAAEY,iBAAkB,IACzD,CACEC,OAAQ,SACRd,WACAe,WAAY,IAIhBP,EAAgBG,QAAQK,QAGjB,kBAAMR,EAAgBG,QAAQM,YACpC,CAACjB,EAAUC,IAEdQ,qBAAU,WACR,IAAIS,EAAQ,KAUZ,OATA,SAASC,IACP,IAAIC,EAAWZ,EAAgBG,QAAQU,YACvCd,EAAQI,QAAQW,aACZF,EAAWpB,EAAY,KAAKuB,UAAY,IAC5CL,EAAQM,sBAAsBL,GAEhCA,GAGO,kBAAMM,qBAAqBP,MACjC,CAAClB,IAUJ,OACE,gCACE,sBAAK0B,QAAQ,cAAcC,UAAU,oBAArC,UACE,wBACEC,GAAG,KACHC,GAAG,KACHC,EAvDO,GAwDPC,KAAK,cACLC,YAAY,IACZL,UAAU,iCAEZ,sBACEM,IAAK1B,EACL2B,EAAE,MACFC,EAAE,MACFC,iBAAiB,SACjBC,WAAW,SACXV,UAAU,4BAEZ,wBACEM,IAAK5B,EACLuB,GAAG,KACHC,GAAG,KACHC,EAxEO,GAyEPC,KAAK,cACLC,YAAY,IACZL,UAAU,kEACVW,gBAAiBrC,EACjBsC,cAAc,aAGlB,sBAAKZ,UAAU,sBAAf,UACE,wBACEa,QAzCc,WACpBhC,EAAgBG,QAAQ8B,QAyClBd,UAAU,kFAFZ,mBAMA,wBACEa,QA3Ce,WACrBhC,EAAgBG,QAAQK,SA2ClBW,UAAU,kFAFZ,2BChFOe,MARf,WACE,OACE,qBAAKf,UAAU,cAAf,SACE,cAAC,EAAD,CAAkB3B,SAAU,SCAlC2C,IAASC,OACP,cAAC,IAAMC,WAAP,UACE,cAAC,EAAD,MAEFC,SAASC,eAAe,U","file":"static/js/main.b055308f.chunk.js","sourcesContent":["import { useEffect, useRef } from \"react\";\n\nconst CircularProgress = ({ duration }) => {\n  const radius = 45;\n  const circumference = radius * 2 * Math.PI;\n\n  const circleRef = useRef();\n  const textRef = useRef();\n\n  let circleAnimation = useRef();\n\n  useEffect(() => {\n    const getStroke = (percent) =>\n      circumference - (percent / 100) * circumference;\n    // Using Native Web Animation API\n    circleAnimation.current = circleRef.current.animate(\n      [{ strokeDashoffset: getStroke(0) }, { strokeDashoffset: 0 }],\n      {\n        easing: \"linear\",\n        duration,\n        iterations: 1,\n      }\n    );\n\n    circleAnimation.current.pause();\n\n    //Cancels animation on unmount\n    return () => circleAnimation.current.cancel();\n  }, [duration, circumference]);\n\n  useEffect(() => {\n    let frame = null;\n    function textAnimation() {\n      let progress = circleAnimation.current.currentTime;\n      textRef.current.textContent =\n        ((progress / duration) * 100).toFixed() + \"%\";\n      frame = requestAnimationFrame(textAnimation);\n    }\n    textAnimation();\n\n    //Cancels animation on unmount\n    return () => cancelAnimationFrame(frame);\n  }, [duration]);\n\n  const playAnimation = () => {\n    circleAnimation.current.play();\n  };\n\n  const pauseAnimation = () => {\n    circleAnimation.current.pause();\n  };\n\n  return (\n    <div>\n      <svg viewBox=\"0 0 100 100\" className=\"mx-auto mb-6 w-64\">\n        <circle\n          cx=\"50\"\n          cy=\"50\"\n          r={radius}\n          fill=\"transparent\"\n          strokeWidth=\"6\"\n          className=\"stroke-current text-gray-700\"\n        />\n        <text\n          ref={textRef}\n          x=\"50%\"\n          y=\"50%\"\n          dominantBaseline=\"middle\"\n          textAnchor=\"middle\"\n          className=\"fill-current text-white\"\n        />\n        <circle\n          ref={circleRef}\n          cx=\"50\"\n          cy=\"50\"\n          r={radius}\n          fill=\"transparent\"\n          strokeWidth=\"3\"\n          className=\"stroke-current text-green-500 transform rotate-90 origin-center\"\n          strokeDasharray={circumference}\n          strokeLinecap=\"round\"\n        />\n      </svg>\n      <div className=\"flex justify-center\">\n        <button\n          onClick={playAnimation}\n          className=\"flex items-center px-4 py-1 mr-4 border border-white rounded hover:bg-gray-700 \"\n        >\n          Start\n        </button>\n        <button\n          onClick={pauseAnimation}\n          className=\"flex items-center px-4 py-1 mr-4 border border-white rounded hover:bg-gray-700 \"\n        >\n          Pause\n        </button>\n      </div>\n    </div>\n  );\n};\n\nexport default CircularProgress;\n","import CircularProgress from \"./components/CircularProgress\";\n\nfunction App() {\n  return (\n    <div className=\"text-center\">\n      <CircularProgress duration={2000} />\n    </div>\n  );\n}\n\nexport default App;\n","import React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport \"./index.css\";\nimport App from \"./App\";\n\nReactDOM.render(\n  <React.StrictMode>\n    <App />\n  </React.StrictMode>,\n  document.getElementById(\"root\")\n);\n"],"sourceRoot":""}