diff --git a/src/core/components/progress-bar/core-progress-bar.html b/src/core/components/progress-bar/core-progress-bar.html
index dc7dc744e..2739ea78b 100644
--- a/src/core/components/progress-bar/core-progress-bar.html
+++ b/src/core/components/progress-bar/core-progress-bar.html
@@ -1,6 +1,6 @@
-<ng-container *ngIf="progress >= 0">
-    <progress max="100" [value]="progress" role="progressbar" [attr.aria-valuenow]="progress" [attr.aria-valuetext]="progressBarValueText"
-        [attr.aria-describedby]="ariaDescribedBy">
+<ng-container *ngIf="progressNumber >= 0">
+    <progress max="100" [value]="progressNumber" role="progressbar" [attr.aria-valuenow]="progressNumber"
+        [attr.aria-valuetext]="progressBarValueText" [attr.aria-describedby]="ariaDescribedBy">
     </progress>
     <div class="core-progress-text">
         <span class="sr-only" *ngIf="a11yText">{{ a11yText | translate }}</span>
@@ -8,4 +8,4 @@
     </div>
 </ng-container>
 
-<ion-progress-bar *ngIf="progress < 0" [color]="color" type="indeterminate"></ion-progress-bar>
+<ion-progress-bar *ngIf="progressNumber < 0" [color]="color" type="indeterminate"></ion-progress-bar>
diff --git a/src/core/components/progress-bar/progress-bar.ts b/src/core/components/progress-bar/progress-bar.ts
index 357d948e5..932e63ddc 100644
--- a/src/core/components/progress-bar/progress-bar.ts
+++ b/src/core/components/progress-bar/progress-bar.ts
@@ -12,7 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { Component, Input, OnChanges, SimpleChange, ChangeDetectionStrategy, ElementRef, OnInit } from '@angular/core';
+import { Component, Input, OnChanges, SimpleChange, ChangeDetectionStrategy, ElementRef } from '@angular/core';
 import { SafeStyle } from '@angular/platform-browser';
 import { DomSanitizer, Translate } from '@singletons';
 
@@ -28,7 +28,7 @@ import { DomSanitizer, Translate } from '@singletons';
     styleUrls: ['progress-bar.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class CoreProgressBarComponent implements OnInit, OnChanges {
+export class CoreProgressBarComponent implements OnChanges {
 
     @Input() progress!: number | string; // Percentage from 0 to 100. Negative number will show an indeterminate progress bar.
     @Input() text?: string; // Percentage in text to be shown at the right. If not defined, progress will be used.
@@ -38,6 +38,7 @@ export class CoreProgressBarComponent implements OnInit, OnChanges {
 
     width?: SafeStyle;
     progressBarValueText?: string;
+    progressNumber = 0;
 
     protected textSupplied = false;
     protected element: HTMLElement;
@@ -46,21 +47,14 @@ export class CoreProgressBarComponent implements OnInit, OnChanges {
         this.element = elementRef.nativeElement;
     }
 
-    /**
-     * @inheritdoc
-     */
-    ngOnInit(): void {
-        if (this.color) {
-            this.element.classList.add('ion-color', 'ion-color-' + this.color);
-        }
-    }
-
     /**
      * @inheritdoc
      */
     ngOnChanges(changes: { [name: string]: SimpleChange }): void {
         if (changes.color) {
-            this.element.classList.remove('ion-color', 'ion-color-' + changes.color.previousValue);
+            if (changes.color.previousValue) {
+                this.element.classList.remove('ion-color', 'ion-color-' + changes.color.previousValue);
+            }
             if (changes.color.currentValue) {
                 this.element.classList.add('ion-color', 'ion-color-' + changes.color.currentValue);
             }
@@ -73,24 +67,7 @@ export class CoreProgressBarComponent implements OnInit, OnChanges {
 
         if (changes.progress) {
             // Progress has changed.
-            if (typeof this.progress == 'string') {
-                this.progress = parseInt(this.progress, 10);
-            }
-
-            if (this.progress < 0 || isNaN(this.progress)) {
-                this.progress = -1;
-            }
-
-            if (this.progress != -1) {
-                // Remove decimals.
-                this.progress = Math.floor(this.progress);
-
-                if (!this.textSupplied) {
-                    this.text = Translate.instant('core.percentagenumber', { $a: this.progress });
-                }
-
-                this.width = DomSanitizer.bypassSecurityTrustStyle(this.progress + '%');
-            }
+            this.updateProgress();
         }
 
         if (changes.text || changes.progress || changes.a11yText) {
@@ -98,4 +75,27 @@ export class CoreProgressBarComponent implements OnInit, OnChanges {
         }
     }
 
+    /**
+     * Update progress because it has changed.
+     */
+    protected updateProgress(): void {
+        // Progress has changed.
+        this.progressNumber = Number(this.progress);
+
+        if (this.progressNumber < 0 || isNaN(this.progressNumber)) {
+            this.progressNumber = -1;
+
+            return;
+        }
+
+        // Remove decimals.
+        this.progressNumber = Math.floor(this.progressNumber);
+
+        if (!this.textSupplied) {
+            this.text = Translate.instant('core.percentagenumber', { $a: this.progressNumber });
+        }
+
+        this.width = DomSanitizer.bypassSecurityTrustStyle(this.progressNumber + '%');
+    }
+
 }