G-Loot DS — progressbar radial

by Augustin Hiebel

HTML

<!-- You can either use the css variable --percent to handle the value of the radial stroke... -->
<div className='progressbar-radial'>
  <div>
    <div>
      <div className='text-2xl font-headings font-bold'>
        {value}%
      </div>
      <div className='text-xs text-ui-300 uppercase'>
        win rate
      </div>
    </div>
  </div>
  <svg viewBox="0 0 40 40" style={{"--percent": {value}}}>
    <circle cx="20" cy="20" r="16" />
  </svg>
</div>

<!-- ... or change the inline stroke dashoffset of the circle -->
<div className='progressbar-radial'>
  <div>
    <div>
      <div className='text-2xl font-headings font-bold'>
        {value}%
      </div>
      <div className='text-xs text-ui-300 uppercase'>
        win rate
      </div>
    </div>
  </div>
  <svg viewBox="0 0 40 40">
    <circle cx="20" cy="20" r="16" style={{ strokeDashoffset : `calc((1px * ${value}) - 100px)`}} />
  </svg>
</div>