---
layout      : 'default'
css         : 'progress'

element     : 'progress'
elementType : 'module'

title       : 'Progress'
description : 'A progress bar shows the progression of a task'
type        : 'UI Module'

themes      : ['Default', 'Classic', 'Basic', 'Striped']
---
<link rel="stylesheet/less" type="text/css" href="/build/less/definitions/modules/progress.less" />
<script src="/javascript/progress.js"></script>

<%- @partial('header', { tabs: {  definition: 'Definition', usage: 'Usage' } }) %>

<div class="main container">

  <div class="ui definition tab" data-tab="definition">

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

    <div class="example">
      <h4 class="ui header">Standard</h4>
      <p>A standard progress bar</p>
      <div class="ui progress">
        <div class="bar">
          <div class="progress"></div>
        </div>
        <div class="label">Uploading Files</div>
      </div>
      <div class="ignored">
        <div class="ui icon buttons">
          <div class="increment ui basic green button"><i class="plus icon"></i></div>
          <div class="decrement ui basic red button"><i class="minus icon"></i></div>
        </div>
      </div>
    </div>
    <div class="indicating example">
      <h4 class="ui header">Indicating</h4>
      <p>An indicating progress bar visually indicates the current level of progress of a task</p>
      <div class="ui indicating progress">
        <div class="bar"></div>
        <div class="label">Funding</div>
      </div>
      <div class="ignored">
        <div class="ui icon buttons">
          <div class="increment ui basic green button"><i class="plus icon"></i></div>
          <div class="decrement ui basic red button"><i class="minus icon"></i></div>
        </div>
      </div>
    </div>

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

    <div class="example">
      <h4 class="ui header">Bar</h4>
      <p>A progress element can contain a bar to indicate the current level of progress</p>
      <div class="ui progress">
        <div class="bar"></div>
      </div>
    </div>

    <div class="example">
      <h4 class="ui header">Current Progress</h4>
      <p>A progress bar can contain a reading of the current progress</p>
      <div class="ui progress">
        <div class="bar">
          <div class="progress"></div>
        </div>
      </div>
    </div>

    <div class="example">
      <h4 class="ui header">Label</h4>
      <p>A progress element can contain a label</p>
      <div class="ui progress">
        <div class="bar">
          <div class="progress"></div>
        </div>
        <div class="label">Uploading Files</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 class="progress"></div>
        </div>
        <div class="label">Uploading Files</div>
      </div>
    </div>


    <div class="example">
    <h4 class="ui header">Success</h4>
    <p>A progress bar can show a success state</p>
      <div class="ui progress success">
        <div class="bar">
          <div class="progress"></div>
        </div>
        <div class="label">Everything worked, your file is all ready.</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 progress warning">
        <div class="bar">
          <div class="progress"></div>
        </div>
        <div class="label">Your file didn't meet the minimum resolution requirements.</div>
      </div>
    </div>

    <div class="example">
    <h4 class="ui header">Error</h4>
    <p>A progress bar can show an error state</p>
      <div class="ui progress error">
        <div class="bar">
          <div class="progress"></div>
        </div>
        <div class="label">There was an error.</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"></div>
      </div>
    </div>

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

    <div class="example">
      <h4 class="ui header">Inverted</h4>
      <p>A progress bar can have its colors inverted</p>
      <div class="ui inverted segment">
        <div class="ui inverted progress">
          <div class="bar">
            <div class="progress"></div>
          </div>
          <div class="label">Uploading Files</div>
        </div>
        <div class="ui inverted progress success">
          <div class="bar">
            <div class="progress"></div>
          </div>
          <div class="label">Success</div>
        </div>
        <div class="ui inverted progress warning">
          <div class="bar">
            <div class="progress"></div>
          </div>
          <div class="label">Warning</div>
        </div>
        <div class="ui inverted progress error">
          <div class="bar">
            <div class="progress"></div>
          </div>
          <div class="label">Error</div>
        </div>
      </div>
    </div>

    <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 black progress">
        <div class="bar"></div>
      </div>
      <div class="ui blue progress">
        <div class="bar"></div>
      </div>
      <div class="ui green progress">
        <div class="bar"></div>
      </div>
      <div class="ui orange progress">
        <div class="bar"></div>
      </div>
      <div class="ui pink progress">
        <div class="bar"></div>
      </div>
      <div class="ui purple progress">
        <div class="bar"></div>
      </div>
      <div class="ui red progress">
        <div class="bar"></div>
      </div>
      <div class="ui teal progress">
        <div class="bar"></div>
      </div>
      <div class="ui yellow progress">
        <div class="bar"></div>
      </div>
    </div>

  </div>

  <div class="ui tab" data-tab="usage">

    <h2 class="ui header">Initializing a progress bar</h2>

    <div class="example">
      <h4 class="ui header">With metadata</h4>
      <p>A progress bar can be initialized with metadata</p>
      <div class="code" data-type="javascript" data-demo="true">
        $('#example1').progress();
      </div>
      <div class="code" data-type="html" data-preview="true">
        <div class="ui teal progress" data-percent="74" id="example1">
          <div class="bar"></div>
          <div class="label">74% Funded</div>
        </div>
      </div>
    </div>
    <div class="example">
      <h4 class="ui header">With javascript</h4>
      <p>A progress bar can be initialized with a javascript settings object</p>
      <div class="code" data-type="javascript" data-demo="true">
        $('#example2').progress({
          percent: 22
        });
      </div>
      <div class="code" data-type="html" data-preview="true">
        <div class="ui teal progress" id="example2">
          <div class="bar"></div>
          <div class="label">22% Earned</div>
        </div>
      </div>
    </div>

    <h2 class="ui header">Task Completion Percent</h2>

    <div class="example">
      <h4 class="ui header">Adding a total value</h4>
      <p>A progress bar can keep track of the current value as a ratio of a total value. This is useful for tracking the progress of a series of events with a known quantity, for example "uploading 1 of 20" photos.</p>
      <p>Each call to increment will increase the value by 1, or the value specified as the second parameter</p>
      <div class="code" data-type="javascript" data-demo="true">
        $('#example3')
          .progress('increment')
        ;
      </div>
      <div class="code" data-type="html" data-preview="true">
        <div class="ui teal progress" id="example3">
          <div class="bar">
            <div class="progress"></div>
          </div>
          <div class="label">Adding Photos</div>
        </div>
      </div>
      <div class="evaluated code" data-type="javascript">
        $('#example3')
          .progress({
            total: 3
          })
        ;
      </div>
    </div>

    <div class="example">
      <h4 class="ui header">Initializing with metadata and using custom labels</h4>
      <p>A progress bar can keep track of the current value as a ratio of a total value. This is useful for tracking the progress of a series of events with a known quantity, for example "uploading 1 of 20" photos.</p>
      <p>Each call to increment will increase the value by 1, or the value specified as the second parameter</p>
      <p>In addition you can pass in templates text for each state available to your progress bar which will automatically be updated when your progress bar reaches that state</p>
      <div class="code" data-type="javascript" data-demo="true">
        $('#example4')
          .progress('increment')
        ;
      </div>
      <div class="code" data-type="html" data-preview="true">
        <div class="ui indicating progress" data-value="1" data-total="20" id="example4">
          <div class="bar">
            <div class="progress"></div>
          </div>
          <div class="label">Adding Photos</div>
        </div>
      </div>
      <div class="evaluated code" data-type="javascript">
        $('#example4')
          .progress({
            text: {
              active  : 'Adding {value} of {total} photos',
              success : '{total} Photos Uploaded!'
            }
          })
        ;
      </div>
    </div>

    <div class="example">
      <h4 class="ui header">Alternate bar labels</h4>
      <p>Progress bar labels can be set to either a percentage or ratio with percentage being the default state. If you need to translate a progress bar label simply pass in a new templated value as the accompanying text.</p>
      <p>The following example shows how to localize for <b>Spanish</b>.</p>
      <div class="code" data-type="javascript" data-demo="true">
        $('#example5')
          .progress('increment')
        ;
      </div>
      <div class="code" data-type="html" data-preview="true">
        <div class="ui teal progress" data-value="15" data-total="20" id="example5">
          <div class="bar">
            <div class="progress"></div>
          </div>
          <div class="label">Carga de archivos</div>
        </div>
      </div>
      <div class="evaluated code" data-type="javascript">
        $('#example5')
          .progress({
            label: 'ratio',
            text: {
              ratio: '{value} de {total}'
            }
          })
        ;
      </div>
    </div>

  </div>

</div>