---
layout      : 'default'
css         : 'progress'
title       : 'Progress'
description : 'A progress bar shows the progression of a task'
type        : 'UI Element'
---

<%- @partial('header') %>

<div class="main container">

  <div class="peek">
    <div class="ui vertical pointing secondary menu">
      <a class="active item">Types</a>
      <a class="item">States</a>
      <a class="item">Variations</a>
    </div>
  </div>
  <h2 class="ui dividing header">Types</h2>

  <div class="example">
    <h4 class="ui header">Progress Bar</h4>
    <p>A standard progress bar</p>
    <div class="ui progress">
      <div class="bar"></div>
    </div>
  </div>

  <h2 class="ui dividing header">States</h2>

  <div class="example">
    <h4 class="ui header">Active</h4>
    <p>A progress bar can show activity</p>
    <div class="ui active progress">
      <div class="bar"></div>
    </div>
  </div>


  <div class="example">
  <h4 class="ui header">Successful</h4>
  <p>A progress bar can show success</p>
    <div class="ui successful progress">
      <div class="bar" style="width:100%"></div>
    </div>
  </div>

  <div class="example">
  <h4 class="ui header">Warning</h4>
  <p>A progress bar can show a warning state</p>
    <div class="ui warning progress">
      <div class="bar" style="width:100%"></div>
    </div>
  </div>

  <div class="example">
  <h4 class="ui header">Failed</h4>
  <p>A progress bar can show failure</p>
    <div class="ui failed progress">
      <div class="bar" style="width:100%"></div>
    </div>
  </div>

  <div class="example">
  <h4 class="ui header">Disabled</h4>
  <p>A progress bar can be disabled</p>
    <div class="ui disabled progress">
      <div class="bar" style="width:100%"></div>
    </div>
  </div>

  <h2 class="ui dividing header">Variations</h2>


  <div class="example">
    <h4 class="ui header">Attached</h4>
    <p>A progress bar can show progress of an element</p>
    <div class="ui top attached progress">
      <div class="bar"></div>
    </div>
    <div class="ui attached segment">
      <p>La la la la</p>
    </div>
    <div class="ui bottom attached progress">
      <div class="bar"></div>
    </div>
  </div>


  <div class="example">
    <h4 class="ui header">Color</h4>
    <p>Can have different colors:</p>
    <div class="ui blue progress">
      <div class="bar"></div>
    </div>
    <div class="ui black progress">
      <div class="bar"></div>
    </div>
    <div class="ui green progress">
      <div class="bar"></div>
    </div>
    <div class="ui red progress">
      <div class="bar"></div>
    </div>
    <div class="ui blue progress">
      <div class="bar"></div>
    </div>
    <div class="ui purple progress">
      <div class="bar"></div>
    </div>
    <div class="ui teal progress">
      <div class="bar"></div>
    </div>
  </div>

  <div class="example">
    <h4 class="ui header">Striped</h4>
    <p>A progress bar can be striped</p>
    <div class="ui striped progress">
      <div class="bar"></div>
    </div>
  </div>
  <div class="another example">
    <div class="ui active striped progress">
      <div class="bar" style="width: 30%;"></div>
    </div>
  </div>

</div>