G-Loot DS — progressbar size

by Augustin Hiebel

HTML

<!-- Small: linear -->
<div className="progressbar progressbar-sm" style={{"--percent": "50"}}>
  <div />
</div>

<!-- Small: radial -->
<div className='progressbar-radial progressbar-sm'>
  <div>
    <div>
      <div className='text-lg font-headings'>
        68%
      </div>
      <div className='text-xs text-ui-300 uppercase'>
        win rate
      </div>
    </div>
  </div>
  <svg viewBox="0 0 40 40" style="--percent:68;">
    <circle cx="20" cy="20" r="16" />
  </svg>
</div>

<!-- Extra small: linear -->
<div className="progressbar progressbar-xs" style={{"--percent": "50"}}>
  <div />
</div>

<!-- Extra small: radial -->
<div className='progressbar-radial progressbar-xs'>
  <svg viewBox="0 0 40 40" style="--percent:68;">
    <circle cx="20" cy="20" r="16" />
  </svg>
</div>