diff --git a/apps/files/js/operationprogressbar.js b/apps/files/js/operationprogressbar.js
index 1d96c2374d4..0ce532af494 100644
--- a/apps/files/js/operationprogressbar.js
+++ b/apps/files/js/operationprogressbar.js
@@ -18,10 +18,9 @@
 
 		render: function() {
 			this.$el.html(OCA.Files.Templates['operationprogressbar']({
-				textDesktop: t('Uploading …'),
-				textMobile: t('…'),
 				textCancelButton: t('Cancel operation')
 			}));
+			this.setProgressBarText(t('Uploading …'), t('…'));
 		},
 
 		hideProgressBar: function() {
@@ -50,12 +49,11 @@
 		},
 
 		setProgressBarText: function(textDesktop, textMobile, title) {
-			$('#uploadprogressbar .ui-progressbar-value').
-				html('<em class="label inner"><span class="desktop">'
-					+ textDesktop
-					+ '</span><span class="mobile">'
-					+ textMobile
-					+ '</span></em>');
+			var labelHtml = OCA.Files.Templates['operationprogressbarlabel']({textDesktop: textDesktop, textMobile: textMobile});
+			$('#uploadprogressbar .ui-progressbar-value').html(labelHtml);
+			$('#uploadprogressbar .ui-progressbar-value>em').addClass('inner');
+			$('#uploadprogressbar>em').replaceWith(labelHtml);
+			$('#uploadprogressbar>em').addClass('outer');
 			$('#uploadprogressbar').tooltip({placement: 'bottom'});
 			if(title) {
 				$('#uploadprogressbar').attr('original-title', title);
diff --git a/apps/files/js/templates.js b/apps/files/js/templates.js
index 0d41c52797f..be6b255d594 100644
--- a/apps/files/js/templates.js
+++ b/apps/files/js/templates.js
@@ -246,15 +246,20 @@ templates['newfilemenu_filename_form'] = template({"compiler":[7,">= 4.0.0"],"ma
     + "\" autocomplete=\"off\" autocapitalize=\"off\">\n	<input type=\"submit\" value=\" \" class=\"icon-confirm\" />\n</form>\n";
 },"useData":true});
 templates['operationprogressbar'] = template({"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) {
+    var helper;
+
+  return "<div id=\"uploadprogressbar\">\n	<em class=\"label outer\" style=\"display:none\"></em>\n</div>\n<button class=\"stop icon-close\" style=\"display:none\">\n	<span class=\"hidden-visually\">"
+    + container.escapeExpression(((helper = (helper = helpers.textCancelButton || (depth0 != null ? depth0.textCancelButton : depth0)) != null ? helper : helpers.helperMissing),(typeof helper === "function" ? helper.call(depth0 != null ? depth0 : (container.nullContext || {}),{"name":"textCancelButton","hash":{},"data":data}) : helper)))
+    + "</span>\n</button>\n";
+},"useData":true});
+templates['operationprogressbarlabel'] = template({"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) {
     var helper, alias1=depth0 != null ? depth0 : (container.nullContext || {}), alias2=helpers.helperMissing, alias3="function", alias4=container.escapeExpression;
 
-  return "<div id=\"uploadprogressbar\">\n	<em class=\"label outer\" style=\"display:none\"><span class=\"desktop\">"
+  return "<em class=\"label\">\n	<span class=\"desktop\">"
     + alias4(((helper = (helper = helpers.textDesktop || (depth0 != null ? depth0.textDesktop : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"textDesktop","hash":{},"data":data}) : helper)))
-    + "</span><span class=\"mobile\">"
+    + "</span>\n	<span class=\"mobile\">"
     + alias4(((helper = (helper = helpers.textMobile || (depth0 != null ? depth0.textMobile : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"textMobile","hash":{},"data":data}) : helper)))
-    + "</span></em>\n</div>\n<button class=\"stop icon-close\" style=\"display:none\">\n	<span class=\"hidden-visually\">"
-    + alias4(((helper = (helper = helpers.textCancelButton || (depth0 != null ? depth0.textCancelButton : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"textCancelButton","hash":{},"data":data}) : helper)))
-    + "</span>\n</button>\n";
+    + "</span>\n</em>\n";
 },"useData":true});
 templates['template_addbutton'] = template({"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) {
     var helper, alias1=depth0 != null ? depth0 : (container.nullContext || {}), alias2=helpers.helperMissing, alias3="function", alias4=container.escapeExpression;
diff --git a/apps/files/js/templates/operationprogressbar.handlebars b/apps/files/js/templates/operationprogressbar.handlebars
index 5d6a7e860f0..c02ac623fab 100644
--- a/apps/files/js/templates/operationprogressbar.handlebars
+++ b/apps/files/js/templates/operationprogressbar.handlebars
@@ -1,5 +1,5 @@
 <div id="uploadprogressbar">
-	<em class="label outer" style="display:none"><span class="desktop">{{textDesktop}}</span><span class="mobile">{{textMobile}}</span></em>
+	<em class="label outer" style="display:none"></em>
 </div>
 <button class="stop icon-close" style="display:none">
 	<span class="hidden-visually">{{textCancelButton}}</span>
diff --git a/apps/files/js/templates/operationprogressbarlabel.handlebars b/apps/files/js/templates/operationprogressbarlabel.handlebars
new file mode 100644
index 00000000000..24ac66994da
--- /dev/null
+++ b/apps/files/js/templates/operationprogressbarlabel.handlebars
@@ -0,0 +1,4 @@
+<em class="label">
+	<span class="desktop">{{textDesktop}}</span>
+	<span class="mobile">{{textMobile}}</span>
+</em>