你可以使用svg cirlces和stroke-dashoffset和stroke-dasharray来创建这个效果。
在下面的例子中，stroke-dashoffset是使用2 * PI * circleRadius / (number of items)计算的，第二个值是每个弧之间的间距。

<svg width="100" height="100" viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="48" fill="none" stroke="green" stroke-width="4" stroke-dasharray="150 2" stroke-dashoffset="-2"/>
  </svg>
<svg width="100" height="100" viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="48" fill="none" stroke="green" stroke-width="4" stroke-dasharray="100 2" stroke-dashoffset="-2"/> 
</svg>

下面是使用上面的@Akshay示例代码import React from 'react'的真示例子

function StatusCircle() {
    const numberOfDots = 2 * 3.14 * 48 / (5) //10 number of statues //48 is the radius of the circle
  return (
      <svg width="100" height="100" viewBox="0 0 100 100">
       <circle cx="50" cy="50" r="48" fill="none" 
       stroke="green" stroke-width="4" stroke-dasharray={`${numberOfDots} 2 `} 
       stroke-dashoffset={numberOfDots}/>
     </svg>
  )
}

export default StatusCircle