mui(v5) の CircularProgress を反時計回り(左回り / counterclockwise) に回す方法です。
variant="determinate" の場合、 value に負数を与えることで反時計回りに回すことができます。
// 時計回り
<CircularProgress variant="determinate" value={0} />
<CircularProgress variant="determinate" value={25} />
<CircularProgress variant="determinate" value={50} />
<CircularProgress variant="determinate" value={75} />
<CircularProgress variant="determinate" value={100} />
// 反時計回り
<CircularProgress variant="determinate" value={0} />
<CircularProgress variant="determinate" value={-25} />
<CircularProgress variant="determinate" value={-50} />
<CircularProgress variant="determinate" value={-75} />
<CircularProgress variant="determinate" value={-100} />
イメージ
注意
mui の ドキュメントでは 0 - 100 の正の数を受け取ると説明されており、将来的に塞がれてしまう恐れがある hacky な方法なので、実際に利用される場合にはご留意ください。