Phoenix UI

Progress

Variant Open in playground
75% 
<.progress value={75} text="75%" variant="linear"/>
<.progress value={75} text="75%" variant="radial"/>
Animate Open in playground 
<.progress class="animate-spin" variant="radial"/>
Color Open in playground
50%
50%
50% 
<.progress value={50} text="50%" color="green" variant="linear"/>
<.progress value={50} text="50%" color="blue" variant="linear"/>
<.progress value={50} text="50%" color="red" variant="linear"/>
<.progress value={50} text="50%" color="green" variant="radial"/>
<.progress value={50} text="50%" color="blue" variant="radial"/>
<.progress value={50} text="50%" color="red" variant="radial"/>
Size Open in playground
75%
75%
75% 
<.progress size="sm" value={75} text="75%" variant="linear"/>
<.progress size="md" value={75} text="75%" variant="linear"/>
<.progress size="lg" value={75} text="75%" variant="linear"/>
<.progress size="sm" value={75} text="75%" variant="radial"/>
<.progress size="md" value={75} text="75%" variant="radial"/>
<.progress size="lg" value={75} text="75%" variant="radial"/>
Square Open in playground
50% 
<.progress value={50} text="50%" square variant="linear"/>
<.progress value={50} text="50%" square variant="radial"/>