import React, { useState, useEffect } from "react";
import { Progress } from "@tencent/tea-component";

export default function ProgressCircleExample() {
  const [percent, setPercent] = useState(0);

  useEffect(() => {
    const timer = setInterval(
      () => setPercent(percent => (percent % 100) + 10),
      1000
    );
    return () => clearInterval(timer);
  }, []);

  return (
    <>
      <Progress type="circle" percent={percent} tips="正在上传应用，请稍等" />
      <hr />
      <Progress
        type="circle"
        theme="default"
        percent={percent}
        text="加固中"
        tips={
          <>
            <p>大约需要5分钟，您可以先去进行其他操作，稍后再来看看。</p>
            <p>
              推荐您使用<a href="#">乐固自助加固</a>工具，可自动加固、签名。
            </p>
          </>
        }
      />
    </>
  );
}