diff --git a/src/app/components/shared/list-statistic/list-statistic.component.scss b/src/app/components/shared/list-statistic/list-statistic.component.scss
index cf3ca118d5173920cc25424e1f1fe96f3e020b0d..4eb3b9569dc9022b60d757f5b555bf32f2bad35c 100644
--- a/src/app/components/shared/list-statistic/list-statistic.component.scss
+++ b/src/app/components/shared/list-statistic/list-statistic.component.scss
@@ -28,7 +28,7 @@ mat-cell {
 
 mat-toolbar {
   height: 20px;
-  background-color: white;
+  background-color: #fff8e1;
 }
 
 .positiveC {
@@ -63,4 +63,3 @@ mat-toolbar {
 .emptyCC {
   background: #E0E0E0;
 }
-
diff --git a/src/app/components/shared/statistic/statistic.component.html b/src/app/components/shared/statistic/statistic.component.html
index 3c1111d6b17543fec0a9a2e1b21a0afedf33e18a..85692db5f8208f83765a932ddd975ff1b10eeaa9 100644
--- a/src/app/components/shared/statistic/statistic.component.html
+++ b/src/app/components/shared/statistic/statistic.component.html
@@ -7,6 +7,11 @@
     <mat-toolbar></mat-toolbar>
   <div>
     <div style="position: relative; height: 60vh">
+      <div *ngIf="isLoading"                                                                                                                                                                                                                                                                                                                                                          fxLayout="column" fxLayoutAlign="center" fxLayoutGap="20px" fxFill>
+        <div fxLayout="row" fxLayoutAlign="center">
+          <mat-progress-spinner mode="indeterminate"></mat-progress-spinner>
+        </div>
+      </div>
       <canvas id="chart"></canvas>
     </div>
   </div>
diff --git a/src/app/components/shared/statistic/statistic.component.scss b/src/app/components/shared/statistic/statistic.component.scss
index 8c4e99f4cb4922f0e4bcdcbc0495d832b27b89da..ddfd27aad8ac32d45a79bc4cd4de6d85a7f61d26 100644
--- a/src/app/components/shared/statistic/statistic.component.scss
+++ b/src/app/components/shared/statistic/statistic.component.scss
@@ -1,9 +1,10 @@
 mat-card {
   max-width: 800px;
   width: 100%;
+  background-color: #fff8e1 !important;
 }
 
 mat-toolbar {
   height: 15px;
-  background-color: white;
+  background-color: #fff8e1;
 }
diff --git a/src/app/components/shared/statistic/statistic.component.ts b/src/app/components/shared/statistic/statistic.component.ts
index 33528463c2867692a57b85bd3713121efef894f9..1b81eb3f75f91245011206cd2b7594a6873acc56 100644
--- a/src/app/components/shared/statistic/statistic.component.ts
+++ b/src/app/components/shared/statistic/statistic.component.ts
@@ -32,6 +32,7 @@ export class StatisticComponent implements OnInit {
   contentId: string;
   subject: string;
   maxLength: number;
+  isLoading = true;
 
   constructor(protected route: ActivatedRoute,
               private contentService: ContentService) { }
@@ -47,6 +48,7 @@ export class StatisticComponent implements OnInit {
     });
     this.contentService.getChoiceContent(this.contentId).subscribe(content => {
       this.getData(content);
+      this.isLoading = false;
     });
   }
 
diff --git a/src/app/components/shared/statistics-page/statistics-page.component.scss b/src/app/components/shared/statistics-page/statistics-page.component.scss
index 9df634ba7037789e292b377fa02f4ab4c61bb42b..ba47efdcdfca808bc0b9056c47a2e895b8e9e371 100644
--- a/src/app/components/shared/statistics-page/statistics-page.component.scss
+++ b/src/app/components/shared/statistics-page/statistics-page.component.scss
@@ -2,4 +2,5 @@ mat-card {
   max-width: 800px;
   width: 100%;
   min-height: 300px;
+  background-color: #fff8e1 !important;
 }