diff --git a/www/core/scss/styles.scss b/www/core/scss/styles.scss
index b9ceba30e8e..2e34dfb117b 100644
--- a/www/core/scss/styles.scss
+++ b/www/core/scss/styles.scss
@@ -48,6 +48,8 @@ $mm-input-required-asterisk-color: $red !default;
 // Item padding.
 $item-input-padding: 16px !default;
 
+$mm-progress-bar-height: 5px !default;
+
 /**
  * App Branding
  */
@@ -1577,22 +1579,36 @@ i, cite, em, var, address, dfn {
 progress {
   -webkit-appearance: none;
   appearance: none;
-  height: 5px;
+  height: $mm-progress-bar-height;
   margin: 15px 0;
   padding: 0;
+  display: block;
 
+  .progress-bar-fallback,
   &[value]::-webkit-progress-bar {
     background-color: $gray-light;
     border-radius: 2px;
     box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1) inset;
   }
 
+  .progress-bar-fallback span,
   &[value]::-webkit-progress-value {
     background-color: $mm-color-light;
     border-radius: 2px;
   }
-}
 
+  .progress-bar-fallback {
+      width: 100%;
+      height: $mm-progress-bar-height;
+      display: block;
+      position: relative;
+
+      span {
+          height: $mm-progress-bar-height;
+          display: block;
+      }
+  }
+}
 
 mm-progress-bar {
   padding-right: 55px;
diff --git a/www/core/templates/progressbar.html b/www/core/templates/progressbar.html
index 352af91cf53..9c0e32a4f4f 100644
--- a/www/core/templates/progressbar.html
+++ b/www/core/templates/progressbar.html
@@ -1,4 +1,8 @@
 <div ng-if="progress !== false && progress >= 0">
-    <progress max="100" value="{{ progress }}"></progress>
+    <progress max="100" value="{{ progress }}">
+        <div class="progress-bar-fallback" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="{{ progress }}">
+            <span style="width: {{ progress }}%;"></span>
+        </div>
+    </progress>
     <span class="mm-progress-text">{{ 'mm.core.percentagenumber' | translate: {$a: text} }}</span>
 </div>