SemanSemantic-UItic-UI/server/partials/examples/progress.html

<div class="ui basic demo progress">
  <div class="bar">
    <div class="progress"></div>
  </div>
  <div class="label">Uploading Files</div>
</div>


<div class="ui indicating demo progress">
  <div class="bar"></div>
  <div class="label">Funding</div>
</div>

<div class="ui teal file demo progress" data-value="6" data-total="20">
  <div class="bar">
    <div class="progress"></div>
  </div>
  <div class="label"></div>
</div>

<div class="ui top attached indicating demo progress">
  <div class="bar"></div>
</div>
<div class="ui attached segment">
</div>
<div class="ui bottom attached demo progress">
  <div class="bar"></div>
</div>

<script type="text/javascript">
$(document)
  .ready(function() {
    $('.attached.progress')
      .progress({
        label   : false,
        value   : Math.floor(Math.random() * 5) + 1
      })
    ;
    $('.basic.progress')
      .progress({
        label   : false,
        value   : Math.floor(Math.random() * 5) + 1,
        text    : {
          active  : '{percent}% Complete',
          success : 'Done!'
        }
      })
    ;
    $('.indicating.progress')
      .progress({
        label   : true,
        total   : 10,
        value   : Math.floor(Math.random() * 5) + 1,
        text    : {
          active  : '{percent}% Done',
          success : 'Completed!'
        }
      })
    ;
    $('.file.progress')
      .progress({
        label: false,
        text: {
          active  : 'Uploading {value} of {total}',
          success : '{total} Files Uploaded!'
        }
      })
    ;
    var progress = function() {
      $('.demo.progress').progress('increment');
      setTimeout(progress, (Math.random() * 2000) + 300);
    };
    setTimeout(progress, 1000);

    setInterval(function() {
      $('.demo.progress').progress('reset');
    }, 30000);

  })
;
</script>