2 files changed, 26 insertions, 9 deletions
diff --git a/phpBB/adm/style/admin.css b/phpBB/adm/style/admin.css
index e38e1cc3d7..4bb9922d56 100644
--- a/phpBB/adm/style/admin.css
+++ b/phpBB/adm/style/admin.css
@@ -2554,6 +2554,7 @@ fieldset.permissions .padding {
 #progress-bar {
 	position: relative;
 	width: 90%;
+	text-align: center;
 	height: 25px;
 	margin: 20px auto;
 	border: 1px solid #cecece;
@@ -2563,10 +2564,7 @@ fieldset.permissions .padding {
 	position: absolute;
 	top: 0;
 	width: 100%;
-	text-align: center;
-	line-height: 25px;
-	font-weight: bold;
-	color: #fff;
+	color: #000;
 }
 
 #progress-bar #progress-bar-filler {
@@ -2577,4 +2575,11 @@ fieldset.permissions .padding {
 	background-color: #3c84ad;
 	width: 0;
 	height: 25px;
+	overflow: hidden;
+	color: #fff;
+}
+
+#progress-bar p {
+	line-height: 25px;
+	font-weight: bold;
 }
diff --git a/phpBB/assets/javascript/installer.js b/phpBB/assets/javascript/installer.js
index c5909556c6..5f2c65c776 100644
--- a/phpBB/assets/javascript/installer.js
+++ b/phpBB/assets/javascript/installer.js
@@ -177,7 +177,7 @@
 	 * @param progressObject
 	 */
 	function setProgress(progressObject) {
-		var $statusText, $progressBar, $progressText, $progressFiller;
+		var $statusText, $progressBar, $progressText, $progressFiller, $progressFillerText;
 
 		if (progressObject.task_name.length) {
 			if (!progressBarTriggered) {
@@ -189,18 +189,23 @@
 				$progressBar.attr('id', 'progress-bar');
 				$progressText = $('<p />');
 				$progressText.attr('id', 'progress-bar-text');
-				$progressFiller = $('<span />');
+				$progressFiller = $('<div />');
 				$progressFiller.attr('id', 'progress-bar-filler');
-				$progressFiller.html($progressText);
+				$progressFillerText = $('<p />');
+				$progressFillerText.attr('id', 'progress-bar-filler-text');
 
 				$statusText = $('<p />');
 				$statusText.attr('id', 'progress-status-text');
 
+				$progressFiller.append($progressFillerText);
+				$progressBar.append($progressText);
 				$progressBar.append($progressFiller);
 
 				$progressBarWrapper.append($statusText);
 				$progressBarWrapper.append($progressBar);
 
+				$progressFillerText.css('width', $progressBar.width());
+
 				progressBarTriggered = true;
 			} else if (progressObject.hasOwnProperty('restart')) {
 				clearInterval(progressTimer);
@@ -210,6 +215,7 @@
 				$statusText = $('#progress-status-text');
 
 				$progressText.text('0%');
+				$progressFillerText.text('0%');
 				$progressFiller.css('width', '0%');
 
 				currentProgress = 0;
@@ -342,15 +348,20 @@
 	 *
 	 * @param $progressText
 	 * @param $progressFiller
+	 * @param $progressFillerText
 	 * @param progressLimit
 	 */
-	function incrementFiller($progressText, $progressFiller, progressLimit) {
+	function incrementFiller($progressText, $progressFiller, $progressFillerText, progressLimit) {
 		if (currentProgress >= progressLimit || currentProgress >= 100) {
 			clearInterval(progressTimer);
 			return;
 		}
 
+		var $progressBar = $('#progress-bar');
+
 		currentProgress++;
+		$progressFillerText.css('width', $progressBar.width());
+		$progressFillerText.text(currentProgress + '%');
 		$progressText.text(currentProgress + '%');
 		$progressFiller.css('width', currentProgress + '%');
 	}
@@ -362,13 +373,14 @@
 	 */
 	function incrementProgressBar(progressLimit) {
 		var $progressFiller = $('#progress-bar-filler');
+		var $progressFillerText = $('#progress-bar-filler-text');
 		var $progressText = $('#progress-bar-text');
 		var progressStart = $progressFiller.width() / $progressFiller.offsetParent().width() * 100;
 		currentProgress = Math.floor(progressStart);
 
 		clearInterval(progressTimer);
 		progressTimer = setInterval(function() {
-			incrementFiller($progressText, $progressFiller, progressLimit);
+			incrementFiller($progressText, $progressFiller, $progressFillerText, progressLimit);
 		}, 10);
 	}