create progress pie component

Signed-off-by: shmck <shawn.j.mckay@gmail.com>

web-app/src/containers/Tutorial/components/Continue.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react'
-import { Dialog, Message } from '@alifd/next'
+import { Dialog } from '@alifd/next'
 import Button from '../../../components/Button'
+import ProgressPie from './ProgressPie'
 
 interface Props {
   onContinue(): void
@@ -31,9 +32,9 @@ const Continue = (props: Props) => {
         onOk={onOk}
         onCancel={onClose}
         onClose={onClose}
-        footerActions={['ok', 'cancel']}
+        footerActions={['ok']}
       >
-        <Message>Level Complete</Message>
+        <ProgressPie />
       </Dialog>
     </>
   )

web-app/src/containers/Tutorial/components/ProgressPie.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react'
+import { Progress, Icon } from '@alifd/next'
+
+const ProgressPie = () => {
+  const [progress, setProgress] = React.useState(0)
+
+  React.useEffect(() => {
+    if (progress < 100) {
+      const intervals = [10, 20]
+      const randomInteval = intervals[Math.floor(Math.random() * intervals.length)]
+      setTimeout(() => {
+        setProgress(progress + randomInteval)
+      }, 200)
+    }
+  }, [progress])
+
+  return (
+    <Progress
+      percent={progress}
+      shape="circle"
+      textRender={() => (progress === 100 ? <Icon type="select" size="xl" /> : null)}
+    />
+  )
+}
+
+export default ProgressPie