Adds indicating progress bar

build/less/themes/packages/classic/modules/progress.overrides

@@ -0,0 +1,3 @@
+/*******************************
+            Progress
+*******************************/

build/less/themes/packages/classic/modules/progress.variables

@@ -0,0 +1,5 @@
+/*******************************
+            Progress
+*******************************/
+
+@border: 1px solid @borderColor;

server/documents/elements/progress.html.eco

@@ -32,6 +32,21 @@ themes      : ['Default', 'Classic', 'Basic', 'Striped']
         <div class="label">Uploading Files</div>
       </div>
     </div>
+    <div class="indicating example">
+      <h4 class="ui header">Indicating Progress Bar</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 button"><i class="plus icon"></i></div>
+          <div class="decrement ui button"><i class="minus icon"></i></div>
+        </div>
+      </div>
+    </div>
 
     <h2 class="ui dividing header">Content</h2>
 
@@ -273,7 +288,7 @@ themes      : ['Default', 'Classic', 'Basic', 'Striped']
         ;
       </div>
       <div class="code" data-type="html" data-preview="true">
-        <div class="ui teal progress" data-value="15" data-total="20" id="example4">
+        <div class="ui indicating progress" data-value="1" data-total="20" id="example4">
           <div class="bar">
             <div class="progress"></div>
           </div>

server/files/javascript/progress.js

@@ -4,12 +4,39 @@ semantic.progress = {};
 semantic.progress.ready = function() {
 
   var
-    $progress      = $('.definition  .ui.progress').not('.success, .error, .warning'),
-    $stateProgress = $('.definition .ui.success.progress, .ui.warning.progress, .ui.error.progress')
+    $progress         = $('.definition  .ui.progress').not('.success, .error, .warning, .indicating'),
+    $indicating       = $('.definition .ui.indicating.progress'),
+    $indicatingButton = $('.definition .indicating.example .button'),
+    $stateProgress    = $('.definition .ui.success.progress, .ui.warning.progress, .ui.error.progress')
   ;
 
   setTimeout(function() {
 
+    $indicatingButton
+      .on('click', function() {
+        var
+          $progress = $(this).closest('.example').find('.progress')
+        ;
+        if( $(this).hasClass('increment') ) {
+          $progress.progress('increment');
+        }
+        else {
+          $progress.progress('decrement');
+        }
+      })
+    ;
+
+    $indicating
+      .progress({
+        label : false,
+        total : 10,
+        text  : {
+          active: '{percent}% Funded',
+          success: 'Project Funded!'
+        }
+      })
+    ;
+
     $progress
       .progress({
         showActivity: false,

src/definitions/elements/button.less

@@ -583,10 +583,7 @@
 .ui.icon.button > .icon {
   opacity: @iconButtonOpacity;
   margin: 0em;
-  vertical-align: top;
-}
-.ui.icon.buttons .button > .icon,
-.ui.icon.button > .icon {
+  vertical-align: baseline;
   height: 0em;
 }
 

src/definitions/modules/progress.less

@@ -37,17 +37,40 @@
   margin: @lastMargin;
 }
 
-/* Indicating Variation
-
-.ui.progress .bar[style^="width:1"],
-.ui.progress .bar[style^="width:2"],
-.ui.progress .bar[style^="width:3"],
-.ui.progress .bar[style^="width: 1"],
-.ui.progress .bar[style^="width: 2"],
-.ui.progress .bar[style^="width: 3"], {
-  background-color: #F43114;
+/* Indicating */
+.ui.indicating.progress .bar[style^="width: 3"]{
+  background-color: #D9A65C;
+}
+.ui.indicating.progress .bar[style^="width: 4"],
+.ui.indicating.progress .bar[style^="width: 5"] {
+  background-color: #E6BB48;
+}
+.ui.indicating.progress .bar[style^="width: 6"] {
+  background-color: #DDC928;
+}
+.ui.indicating.progress .bar[style^="width: 7"],
+.ui.indicating.progress .bar[style^="width: 8"] {
+  background-color: #B4D95C;
+}
+.ui.indicating.progress .bar[style^="width: 9"],
+.ui.indicating.progress .bar[style^="width: 100"] {
+  background-color: #66DA81;
+}
+
+/* Single Digits Last */
+.ui.indicating.progress .bar[style^="width: 1%"],
+.ui.indicating.progress .bar[style^="width: 2%"],
+.ui.indicating.progress .bar[style^="width: 3%"],
+.ui.indicating.progress .bar[style^="width: 4%"],
+.ui.indicating.progress .bar[style^="width: 5%"],
+.ui.indicating.progress .bar[style^="width: 6%"],
+.ui.indicating.progress .bar[style^="width: 7%"],
+.ui.indicating.progress .bar[style^="width: 8%"],
+.ui.indicating.progress .bar[style^="width: 9%"],
+.ui.indicating.progress .bar[style^="width: 1"],
+.ui.indicating.progress .bar[style^="width: 2"] {
+  background-color: #D95C5C;
 }
-*/
 
 /*******************************
             Content