added new <ProgressBar /> component

addon/components/progress-bar.hbs

@@ -0,0 +1,12 @@
+<div>
+    <div class="mb-2 flex justify-between items-center">
+        <h3 class="text-sm font-semibold text-gray-800 dark:text-white">{{@title}}</h3>
+        <span class="text-sm text-gray-800 dark:text-white">{{@percent}}%</span>
+    </div>
+    <div class="flex w-full h-2 bg-gray-200 rounded-full overflow-hidden dark:bg-neutral-700" role="progressbar" aria-valuenow={{@percent}} aria-valuemin="0" aria-valuemax="100">
+        <div
+            class="flex flex-col justify-center rounded-full overflow-hidden bg-blue-600 text-xs text-white text-center whitespace-nowrap transition duration-500 dark:bg-blue-500"
+            {{did-update this.setProgress @percent}}
+        ></div>
+    </div>
+</div>

addon/components/progress-bar.js

@@ -0,0 +1,8 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+
+export default class ProgressBarComponent extends Component {
+    @action setProgress(el, [percent]) {
+        el.style.width = `${percent}%`;
+    }
+}

app/components/progress-bar.js

@@ -0,0 +1 @@
+export { default } from '@fleetbase/ember-ui/components/progress-bar';

tests/integration/components/progress-bar-test.js

@@ -0,0 +1,26 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'dummy/tests/helpers';
+import { render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Component | progress-bar', function (hooks) {
+    setupRenderingTest(hooks);
+
+    test('it renders', async function (assert) {
+        // Set any properties with this.set('myProperty', 'value');
+        // Handle any actions with this.set('myAction', function(val) { ... });
+
+        await render(hbs`<ProgressBar />`);
+
+        assert.dom().hasText('');
+
+        // Template block usage:
+        await render(hbs`
+      <ProgressBar>
+        template block text
+      </ProgressBar>
+    `);
+
+        assert.dom().hasText('template block text');
+    });
+});