diff --git a/ui/app/components/freestyle/sg-progress-bar.js b/ui/app/components/freestyle/sg-progress-bar.js
new file mode 100644
index 000000000..613bc08e9
--- /dev/null
+++ b/ui/app/components/freestyle/sg-progress-bar.js
@@ -0,0 +1,35 @@
+import Component from '@ember/component';
+import { computed } from '@ember/object';
+
+export default Component.extend({
+  timerTicks: 0,
+
+  startTimer: function() {
+    this.set(
+      'timer',
+      setInterval(() => {
+        this.incrementProperty('timerTicks');
+      }, 1000)
+    );
+  }.on('init'),
+
+  willDestroy() {
+    clearInterval(this.get('timer'));
+  },
+
+  denominator: computed('timerTicks', function() {
+    return Math.round(Math.random() * 1000);
+  }),
+
+  percentage: computed('timerTicks', function() {
+    return Math.round(Math.random() * 100) / 100;
+  }),
+
+  numerator: computed('denominator', 'percentage', function() {
+    return Math.round(this.get('denominator') * this.get('percentage') * 100) / 100;
+  }),
+
+  liveDetails: computed('denominator', 'numerator', 'percentage', function() {
+    return this.getProperties('denominator', 'numerator', 'percentage');
+  }),
+});
diff --git a/ui/app/templates/components/freestyle/sg-progress-bar.hbs b/ui/app/templates/components/freestyle/sg-progress-bar.hbs
new file mode 100644
index 000000000..24e34f00e
--- /dev/null
+++ b/ui/app/templates/components/freestyle/sg-progress-bar.hbs
@@ -0,0 +1,77 @@
+{{#freestyle-usage "progress-bar" title="Progress Bar"}}
+  <div class="inline-chart tooltip" aria-label="5 / 15">
+    <progress
+      class="progress is-primary is-small"
+      value="0.33"
+      max="1">
+      0.33
+    </progress>
+  </div>
+{{/freestyle-usage}}
+
+{{#freestyle-usage "progress-bar-colors" title="Progress Bar Colors"}}
+  <div class="columns">
+    <div class="column">
+      <div class="inline-chart tooltip" aria-label="5 / 15">
+        <progress
+          class="progress is-info is-small"
+          value="0.33"
+          max="1">
+          0.33
+        </progress>
+      </div>
+    </div>
+    <div class="column">
+      <div class="inline-chart tooltip" aria-label="5 / 15">
+        <progress
+          class="progress is-success is-small"
+          value="0.33"
+          max="1">
+          0.33
+        </progress>
+      </div>
+    </div>
+    <div class="column">
+      <div class="inline-chart tooltip" aria-label="5 / 15">
+        <progress
+          class="progress is-warning is-small"
+          value="0.33"
+          max="1">
+          0.33
+        </progress>
+      </div>
+    </div>
+    <div class="column">
+      <div class="inline-chart tooltip" aria-label="5 / 15">
+        <progress
+          class="progress is-danger is-small"
+          value="0.33"
+          max="1">
+          0.33
+        </progress>
+      </div>
+    </div>
+  </div>
+{{/freestyle-usage}}
+
+{{#freestyle-usage "progress-bar-live" title="Progress Bar Live Updates"}}
+  <div class="columns">
+    <div class="column is-one-third">
+      <div class="inline-chart tooltip" aria-label="{{numerator}} / {{denominator}}">
+        <progress
+          class="progress is-primary is-small"
+          value="{{percentage}}"
+          max="1">
+          {{percentage}}
+        </progress>
+      </div>
+    </div>
+  </div>
+{{/freestyle-usage}}
+{{#freestyle-annotation}}
+  <div class="boxed-section">
+    <div class="boxed-section-body is-dark">
+      {{json-viewer json=liveDetails}}
+    </div>
+  </div>
+{{/freestyle-annotation}}
diff --git a/ui/app/templates/freestyle.hbs b/ui/app/templates/freestyle.hbs
index b0e1684ea..3e24d0147 100644
--- a/ui/app/templates/freestyle.hbs
+++ b/ui/app/templates/freestyle.hbs
@@ -98,6 +98,7 @@
       {{/section.subsection}}
 
       {{#section.subsection name="Progress Bar"}}
+        {{freestyle/sg-progress-bar}}
       {{/section.subsection}}
     {{/freestyle-section}}
   {{/freestyle-guide}}