Index: /main/trunk/model-interfaces-dev/atea/korero-maori-asr/src/components/AudioUpload.vue
===================================================================
--- /main/trunk/model-interfaces-dev/atea/korero-maori-asr/src/components/AudioUpload.vue	(revision 35448)
+++ /main/trunk/model-interfaces-dev/atea/korero-maori-asr/src/components/AudioUpload.vue	(revision 35449)
@@ -18,5 +18,7 @@
         </div>
 
-        <progress v-if="isTranscribing" class="indeterminateLoadingBar" />
+        <div v-if="isTranscribing" class="progress-bar-container">
+            <div class="progress-bar-value progress-bar-indeterminate" />
+        </div>
 
         <ul class="list-view" v-if="failures.size > 0">
@@ -158,6 +160,4 @@
          */
         async getTranscriptions(files) {
-            await Util.delay(200); // TODO: Remove - UI testing purposes only
-
             const validFiles = [];
 
Index: /main/trunk/model-interfaces-dev/atea/korero-maori-asr/src/components/TranscriptionItem.vue
===================================================================
--- /main/trunk/model-interfaces-dev/atea/korero-maori-asr/src/components/TranscriptionItem.vue	(revision 35448)
+++ /main/trunk/model-interfaces-dev/atea/korero-maori-asr/src/components/TranscriptionItem.vue	(revision 35449)
@@ -128,6 +128,6 @@
             this.showAdvancedEditor = !this.showAdvancedEditor;
         },
-        toggleAudio() {
-            this.isPlaying ? AudioPlayback.pause() : AudioPlayback.play(this.transcription.id, -1);
+        async toggleAudio() {
+            this.isPlaying ? AudioPlayback.pause() : await AudioPlayback.play(this.transcription.id, -1);
         },
         remove() {
Index: /main/trunk/model-interfaces-dev/atea/korero-maori-asr/src/components/TranscriptionItemEditor.vue
===================================================================
--- /main/trunk/model-interfaces-dev/atea/korero-maori-asr/src/components/TranscriptionItemEditor.vue	(revision 35448)
+++ /main/trunk/model-interfaces-dev/atea/korero-maori-asr/src/components/TranscriptionItemEditor.vue	(revision 35449)
@@ -141,6 +141,6 @@
     },
     methods: {
-        playAudio(startTime) {
-            AudioPlayback.play(this.transcription.id, startTime);
+        async playAudio(startTime) {
+            await AudioPlayback.play(this.transcription.id, startTime);
         },
         /**
Index: /main/trunk/model-interfaces-dev/atea/korero-maori-asr/src/styles/_material.scss
===================================================================
--- /main/trunk/model-interfaces-dev/atea/korero-maori-asr/src/styles/_material.scss	(revision 35448)
+++ /main/trunk/model-interfaces-dev/atea/korero-maori-asr/src/styles/_material.scss	(revision 35449)
@@ -320,4 +320,58 @@
 }
 
+/* Progress Bars */
+
+.progress-circle-indeterminate {
+    height: 2em;
+    width: 2em;
+
+    border: 0.25em solid var(--bg-color);
+    border-right: 0.25em solid rgba(var(--bg-color-raw), 0.3);
+    border-radius: 50%;
+
+    animation: 1.5s linear 0s infinite running rotate360;
+}
+
+@keyframes rotate360 {
+    0% {
+        transform: rotate(0deg);
+    }
+
+    100% {
+        transform: rotate(360deg);
+    }
+}
+
+.progress-bar-container {
+    width: 100%;
+    height: 8px;
+    overflow: hidden;
+
+    background-color: rgba(var(--bg-color-raw), 0.2);
+    border-radius: 4px;
+}
+
+.progress-bar-value {
+    height: 100%;
+
+    background-color: var(--bg-color);
+    border-radius: 4px;
+}
+
+.progress-bar-indeterminate {
+    width: 20%;
+    animation: 2s ease 0s infinite alternate prgbr-indeterminate;
+}
+
+@keyframes prgbr-indeterminate {
+    0% {
+        transform: translateX(-100%);
+    }
+
+    100% {
+        transform: translateX(500%);
+    }
+}
+
 /* === End component definitions === */
 
Index: /main/trunk/model-interfaces-dev/atea/korero-maori-asr/src/styles/theme.scss
===================================================================
--- /main/trunk/model-interfaces-dev/atea/korero-maori-asr/src/styles/theme.scss	(revision 35448)
+++ /main/trunk/model-interfaces-dev/atea/korero-maori-asr/src/styles/theme.scss	(revision 35449)
@@ -20,4 +20,5 @@
 body {
     background-color: var(--page-bg-color);
+    color: var(--body-color);
     font-family: 'Roboto', sans-serif;
     
