JSFiddle - React, Tailwind, and code Playground
HTML
<!-- 0 / 6 -->
<svg width="102px" height="102px" viewBox="0 0 2 2" xmlns="http://www.w3.org/2000/svg">
<circle cx="1" cy="1" r="0.95" fill="white" fill-opacity="0.12"/>
<circle cx="1" cy="1" r="0.6" fill="#ff8a00" stroke="transparent"/>
</svg>
<!-- 1 / 6 -->
<svg width="102px" height="102px" viewBox="0 0 2 2" xmlns="http://www.w3.org/2000/svg">
<circle cx="1" cy="1" r="0.95" fill="white" fill-opacity="0.12"/>
<circle cx="1" cy="1" r="0.6" fill="#ff8a00" stroke="transparent"/>
<circle cx="1" cy="1" r="0.95" fill="transparent" stroke="#ff8a00"
stroke-width="0.1"
pathLength="6"
stroke-dashoffset="2.5"
stroke-dasharray="1 5"
/>
</svg>
<!-- 2 / 6 -->
<svg width="102px" height="102px" viewBox="0 0 2 2" xmlns="http://www.w3.org/2000/svg">
<circle cx="1" cy="1" r="0.95" fill="white" fill-opacity="0.12"/>
<circle cx="1" cy="1" r="0.6" fill="#ff8a00" stroke="transparent"/>
<circle cx="1" cy="1" r="0.95" fill="transparent" stroke="#ff8a00"
stroke-width="0.1"
pathLength="6"
stroke-dashoffset="3.5"
stroke-dasharray="2 4"
/>
</svg>
<!-- 3 / 6 -->
<svg width="102px" height="102px" viewBox="0 0 2 2" xmlns="http://www.w3.org/2000/svg">
<circle cx="1" cy="1" r="0.95" fill="white" fill-opacity="0.12"/>
<circle cx="1" cy="1" r="0.6" fill="#ff8a00" stroke="transparent"/>
<circle cx="1" cy="1" r="0.95" fill="transparent" stroke="#ff8a00"
stroke-width="0.1"
pathLength="6"
stroke-dashoffset="4.5"
stroke-dasharray="3 3"
/>
</svg>
<!-- 4 / 6 -->
<svg width="102px" height="102px" viewBox="0 0 2 2" xmlns="http://www.w3.org/2000/svg">
<circle cx="1" cy="1" r="0.95" fill="white" fill-opacity="0.12"/>
<circle cx="1" cy="1" r="0.6" fill="#ff8a00" stroke="transparent"/>
<circle cx="1" cy="1" r="0.95" fill="transparent" stroke="#ff8a00"
stroke-width="0.1"
pathLength="6"
stroke-dashoffset="5.5"
stroke-dasharray="4 2"
/>
</svg>
<!-- 5 / 6 -->
<svg width="102px" height="102px" viewBox="0 0 2 2"...
CSS
body { background: #212121; }