UI Components
Progress
# Basic usage
50%
<x-progress value="50" /># Divided format
50/100
<x-progress value="50" divided-format /># Without value
<x-progress value="50" without-value /># With label
Percentage
50%
Divided
50/100
<x-progress value="50" label="Percentage" /><x-progress value="50" label="Divided" divided-format /># Label position
Top
50%
Bottom
50%
<x-progress value="50" label="Top" label-position="top" /><x-progress value="50" label="Bottom" label-position="bottom" /># Size variants
50%
50%
50%
50%
50%
50%
<x-progress value="50" xs /><x-progress value="50" sm /><x-progress value="50" md /> {{-- default --}}<x-progress value="50" lg /><x-progress value="50" xl /><x-progress value="50" 2xl /># Color variants
50%
50%
50%
50%
50%
50%
50%
50%
50%
50%
50%
50%
50%
50%
50%
50%
50%
50%
50%
50%
50%
50%
50%
50%
<x-progress value="50" /><x-progress value="50" black /><x-progress value="50" slate /><x-progress value="50" zinc /><x-progress value="50" gray /><x-progress value="50" neutral /><x-progress value="50" stone /><x-progress value="50" red /><x-progress value="50" orange /><x-progress value="50" amber /><x-progress value="50" yellow /><x-progress value="50" lime /><x-progress value="50" green /><x-progress value="50" emerald /><x-progress value="50" teal /><x-progress value="50" cyan /><x-progress value="50" sky /><x-progress value="50" blue /><x-progress value="50" indigo /><x-progress value="50" violet /><x-progress value="50" purple /><x-progress value="50" fuchsia /><x-progress value="50" pink /><x-progress value="50" rose />