public/assets/css/general.css

@@ -539,6 +539,14 @@ table {
 	text-align: center;
 }
 
+.progress-bar--inactive {
+	color: lightgrey;
+}
+
+.progress-bar--active {
+	color: dodgerblue;
+}
+
 /* ---- grid items ---- */
 
 .grid-item {

public/assets/js/generalFunctions.js

@@ -63,21 +63,42 @@ function toggleSection(event){
 }
 
 function createProgressBar(element, size){
-	var x = 1;
+    console.log('creating progress bar');
+	var x = 0;
 	var adder = 1;
-	function addOne(){
-		var bars = '<p>|';
-		for (var i = 0; i < x; i++){ bars += ' | '; }
-		bars += '</p>';
-		element.innerHTML = bars;
-		if (x === size){
-			adder = -1;
-		} else if ( x === 0){
-			adder = 1;
-		}
-		x += adder;
+	// create the bar holder & place it
+    var barHolder = document.createElement('p');
+	for (var i = 0; i < size; i++) {
+        const bar = document.createElement('span');
+        bar.innerText = '| ';
+        bar.setAttribute('class', 'progress-bar progress-bar--inactive');
+        barHolder.appendChild(bar);
+    }
+    element.appendChild(barHolder);
+	// get the bars
+    const bars = document.getElementsByClassName('progress-bar');
+    // function to update the bars' classes
+	function updateOneBar(){
+        // update the appropriate bar
+        if (x > -1 && x < size){
+            if (adder === 1){
+                bars[x].setAttribute('class', 'progress-bar progress-bar--active');
+            } else {
+                bars[x].setAttribute('class', 'progress-bar progress-bar--inactive');
+            }
+        }
+        // set x
+        if (x === size){
+            adder = -1;
+        } else if ( x === -1){
+            adder = 1;
+        }
+        // update the adder
+        x += adder;
+
 	};
-	setInterval(addOne, 300);
+	// start updater
+	setInterval(updateOneBar, 300);
 }
 
 function setCookie(key, value) {

views/index.handlebars

@@ -39,7 +39,6 @@
             </div>
         </div>
     </div>
-
     <div id="publish-status" class="hidden">
         <div id="publish-update" class="row align-content-center"></div>
         <div id="publish-progress-bar" class="row align-content-center"></div>