Add preloader bar and slightly better preload text

src/css/hues-h.css

@@ -8,7 +8,9 @@
 }
 
 #preloadHelper.hues-h-text {
-    background-color: black;
+    background: linear-gradient(to right, #000 0%,#000 50%,#222 50%,#222 100%);
+    background-size: 200% 100%;
+    background-position: 100% 0;
 }
 
 .hues-h-textfade {

src/css/style.css

@@ -123,7 +123,11 @@ h1, h2, h3 {
 }
 
 #preloadHelper {
-    background-color: #FFF; 
+    /* first 2 colours are the loaded colour, next 2 are unloaded */
+    background: linear-gradient(to right, #fff 0%,#fff 50%,#ddd 50%,#ddd 100%);
+    background-size: 200% 100%;
+    background-position: 100% 0;
+    
     width: 100%;
     height: 100%;
     display:flex;
@@ -138,7 +142,7 @@ h1, h2, h3 {
     z-index: 10;
     visibility: visible;
     opacity: 1;
-    transition: visibility 1s linear, opacity 1s linear;
+    transition: visibility 1s linear, opacity 1s linear, background-position 0.5s ease;
 }
 
 #preloadHelper.loaded {

src/js/HuesCore.js

@@ -158,6 +158,8 @@ function HuesCore(defaults) {
         if(defaults.load) {
             return this.resourceManager.addAll(defaults.respacks, function(progress) {
                 let prog = document.getElementById("preMain");
+                let helper = document.getElementById("preloadHelper");
+                helper.style.backgroundPosition = (100 - progress*100) + "% 0%";
                 let scale = Math.floor(progress * defaults.preloadMax);
                 let padding = defaults.preloadMax.toString(defaults.preloadBase).length;
                 prog.textContent = defaults.preloadPrefix + (Array(padding).join("0")+scale.toString(defaults.preloadBase)).slice(-padding);

src/js/ResourcePack.js

@@ -61,13 +61,13 @@ Respack.prototype.audioExtensions = new RegExp("\\.(mp3|ogg|wav)$", "i");
 Respack.prototype.imageExtensions = new RegExp("\\.(png|gif|jpg|jpeg)$", "i");
 Respack.prototype.animRegex = new RegExp("(.*?)_\\d+$");
 
-Respack.prototype.updateProgress = function() {
+Respack.prototype.updateProgress = function(override) {
     if(this.progressCallback) {
         let percent = this.filesLoaded / this.filesToLoad;
         if(this.loadedFromURL) {
             percent = (percent / 2) + 0.5;
         }
-        this.progressCallback(percent, this);
+        this.progressCallback(typeof override === "number" ? override : percent, this);
     }
 };
 
@@ -126,6 +126,8 @@ Respack.prototype.loadFromBlob = function(blob, progress) {
     if(progress) {
         this.progressCallback = progress;
     }
+    // We don't get progress events for loading the zip, set 0 progress
+    this.updateProgress(0);
     return new Promise((resolve, reject) => {
         this.size = blob.size;
         let file = new zip.fs.FS();