Phenix Storybook

Pick a theme

Displays Riders

Progress

Default progress bar Open in playground 
<.progress class="w-64">
  <.progress_section value={20}/>
  <.progress_section value={20} color={:warning}/>
  <.progress_section value={20} color={:danger}/>
</.progress>
Multiple colors Open in playground 
<.progress class="w-60">
  <.progress_section value={10} color={:primary}/>
</.progress>

<.progress class="w-60">
  <.progress_section value={30} color={:info}/>
</.progress>

<.progress class="w-60">
  <.progress_section value={50} color={:success}/>
</.progress>

<.progress class="w-60">
  <.progress_section value={70} color={:warning}/>
</.progress>

<.progress class="w-60">
  <.progress_section value={90} color={:danger}/>
</.progress>
Striped progress sections Open in playground 
<.progress class="w-60">
  <.progress_section value={10} color={:primary} striped/>
</.progress>

<.progress class="w-60">
  <.progress_section value={30} color={:info} striped/>
</.progress>

<.progress class="w-60">
  <.progress_section value={50} color={:success} striped/>
</.progress>

<.progress class="w-60">
  <.progress_section value={70} color={:warning} striped/>
</.progress>

<.progress class="w-60">
  <.progress_section value={90} color={:danger} striped/>
</.progress>
Large progress bar Open in playground 
<.progress class="w-64" size="lg">
  <.progress_section value={10} color={:primary}/>
</.progress>

<.progress class="w-64" size="lg">
  <.progress_section value={30} color={:info}/>
</.progress>

<.progress class="w-64" size="lg">
  <.progress_section value={50} color={:success}/>
</.progress>

<.progress class="w-64" size="lg">
  <.progress_section value={70} color={:warning}/>
</.progress>

<.progress class="w-64" size="lg">
  <.progress_section value={90} color={:danger}/>
</.progress>