diff --git a/src/app/pages/translate/pose-viewers/human-pose-viewer/human-pose-viewer.component.html b/src/app/pages/translate/pose-viewers/human-pose-viewer/human-pose-viewer.component.html
index 1b7c0bdb..fc03fc8a 100644
--- a/src/app/pages/translate/pose-viewers/human-pose-viewer/human-pose-viewer.component.html
+++ b/src/app/pages/translate/pose-viewers/human-pose-viewer/human-pose-viewer.component.html
@@ -1,9 +1,8 @@
 <ng-container *transloco="let t; read: 'translate.spoken-to-signed.progress-bars.human-pose-viewer'">
-  <mat-progress-bar
+  <ion-progress-bar
     *ngIf="modelReady && !ready"
-    mode="determinate"
-    [value]="progress()"
-    [attr.aria-label]="t('generating')"></mat-progress-bar>
+    [value]="progress"
+    [attr.aria-label]="t('generating')"></ion-progress-bar>
 
   <pose-viewer
     #poseViewer
@@ -15,7 +14,7 @@
     width="256px"
     height="256px"></pose-viewer>
 
-  <mat-spinner *ngIf="!modelReady" [attr.aria-label]="t('loading')"></mat-spinner>
+  <ion-spinner *ngIf="!modelReady" [attr.aria-label]="t('loading')" color="primary"></ion-spinner>
 
   <canvas #canvas width="768" height="768"></canvas>
 </ng-container>
diff --git a/src/app/pages/translate/pose-viewers/human-pose-viewer/human-pose-viewer.component.scss b/src/app/pages/translate/pose-viewers/human-pose-viewer/human-pose-viewer.component.scss
index a5098e14..26afcf6b 100644
--- a/src/app/pages/translate/pose-viewers/human-pose-viewer/human-pose-viewer.component.scss
+++ b/src/app/pages/translate/pose-viewers/human-pose-viewer/human-pose-viewer.component.scss
@@ -13,11 +13,11 @@ canvas {
   align-self: center;
 }
 
-mat-progress-bar {
+ion-progress-bar {
   position: absolute;
 }
 
-mat-spinner {
+ion-spinner {
   position: absolute;
   top: 50%;
   left: 50%;
diff --git a/src/app/pages/translate/pose-viewers/human-pose-viewer/human-pose-viewer.component.spec.ts b/src/app/pages/translate/pose-viewers/human-pose-viewer/human-pose-viewer.component.spec.ts
index 377e840d..801423e9 100644
--- a/src/app/pages/translate/pose-viewers/human-pose-viewer/human-pose-viewer.component.spec.ts
+++ b/src/app/pages/translate/pose-viewers/human-pose-viewer/human-pose-viewer.component.spec.ts
@@ -8,7 +8,7 @@ import {NgxsModule} from '@ngxs/store';
 import {SettingsState} from '../../../../modules/settings/settings.state';
 import {ngxsConfig} from '../../../../core/modules/ngxs/ngxs.module';
 import {AppTranslocoTestingModule} from '../../../../core/modules/transloco/transloco-testing.module';
-import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
+import {IonicModule} from '@ionic/angular';
 
 describe('HumanPoseViewerComponent', () => {
   let component: HumanPoseViewerComponent;
@@ -19,7 +19,7 @@ describe('HumanPoseViewerComponent', () => {
       declarations: [HumanPoseViewerComponent],
       imports: [
         Pix2PixModule,
-        MatProgressSpinnerModule,
+        IonicModule.forRoot(),
         NgxsModule.forRoot([SettingsState], ngxsConfig),
         AppTranslocoTestingModule,
       ],
diff --git a/src/app/pages/translate/pose-viewers/human-pose-viewer/human-pose-viewer.component.ts b/src/app/pages/translate/pose-viewers/human-pose-viewer/human-pose-viewer.component.ts
index 98bbdeef..ae754082 100644
--- a/src/app/pages/translate/pose-viewers/human-pose-viewer/human-pose-viewer.component.ts
+++ b/src/app/pages/translate/pose-viewers/human-pose-viewer/human-pose-viewer.component.ts
@@ -136,7 +136,7 @@ export class HumanPoseViewerComponent extends BasePoseViewerComponent implements
       .subscribe();
   }
 
-  progress(): number {
+  get progress(): number {
     if (!this.poseEl) {
       return 0;
     }
@@ -145,6 +145,6 @@ export class HumanPoseViewerComponent extends BasePoseViewerComponent implements
       return 0;
     }
 
-    return (100 * this.frameIndex) / this.totalFrames;
+    return this.frameIndex / this.totalFrames;
   }
 }
diff --git a/src/app/pages/translate/pose-viewers/pose-viewers.module.ts b/src/app/pages/translate/pose-viewers/pose-viewers.module.ts
index 4c96567e..27c79ad7 100644
--- a/src/app/pages/translate/pose-viewers/pose-viewers.module.ts
+++ b/src/app/pages/translate/pose-viewers/pose-viewers.module.ts
@@ -7,7 +7,6 @@ import {SkeletonPoseViewerComponent} from './skeleton-pose-viewer/skeleton-pose-
 import {HumanPoseViewerComponent} from './human-pose-viewer/human-pose-viewer.component';
 import {AnimationModule} from '../../../components/animation/animation.module';
 import {AppSharedModule} from '../../../core/modules/shared.module';
-import {MatProgressBarModule} from '@angular/material/progress-bar';
 import {MatTooltipModule} from '@angular/material/tooltip';
 
 const components = [
@@ -18,7 +17,7 @@ const components = [
 ];
 
 @NgModule({
-  imports: [AppSharedModule, IonicModule, AnimationModule, MatProgressBarModule, MatTooltipModule],
+  imports: [AppSharedModule, IonicModule, AnimationModule, MatTooltipModule],
   declarations: components,
   exports: components,
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
diff --git a/src/app/pages/translate/pose-viewers/skeleton-pose-viewer/skeleton-pose-viewer.component.spec.ts b/src/app/pages/translate/pose-viewers/skeleton-pose-viewer/skeleton-pose-viewer.component.spec.ts
index af11c3c7..75157fd9 100644
--- a/src/app/pages/translate/pose-viewers/skeleton-pose-viewer/skeleton-pose-viewer.component.spec.ts
+++ b/src/app/pages/translate/pose-viewers/skeleton-pose-viewer/skeleton-pose-viewer.component.spec.ts
@@ -2,8 +2,6 @@ import {ComponentFixture, TestBed} from '@angular/core/testing';
 import {axe, toHaveNoViolations} from 'jasmine-axe';
 
 import {SkeletonPoseViewerComponent} from './skeleton-pose-viewer.component';
-import {Pix2PixModule} from '../../../../modules/pix2pix/pix2pix.module';
-import {MatProgressBarModule} from '@angular/material/progress-bar';
 import {CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
 import {NgxsModule} from '@ngxs/store';
 import {SettingsState} from '../../../../modules/settings/settings.state';
@@ -16,7 +14,7 @@ describe('SkeletonPoseViewerComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       declarations: [SkeletonPoseViewerComponent],
-      imports: [Pix2PixModule, MatProgressBarModule, NgxsModule.forRoot([SettingsState], ngxsConfig)],
+      imports: [NgxsModule.forRoot([SettingsState], ngxsConfig)],
       schemas: [CUSTOM_ELEMENTS_SCHEMA],
     }).compileComponents();
   });