diff --git a/src/web/App.mjs b/src/web/App.mjs
index 453fba22..e203b85c 100755
--- a/src/web/App.mjs
+++ b/src/web/App.mjs
@@ -124,6 +124,9 @@ class App {
// Reset attemptHighlight flag
this.options.attemptHighlight = true;
+ // Remove all current indicators
+ this.manager.recipe.updateBreakpointIndicator(false);
+
this.manager.worker.bake(
this.getInput(), // The user's input
this.getRecipeConfig(), // The configuration of the recipe
diff --git a/src/web/OutputWaiter.mjs b/src/web/OutputWaiter.mjs
index 39d6e51b..5e7ae7e8 100755
--- a/src/web/OutputWaiter.mjs
+++ b/src/web/OutputWaiter.mjs
@@ -334,12 +334,11 @@ class OutputWaiter {
/**
- * Save bombe object before it is removed so that it can be used later
+ * Save bombe object then remove it from the DOM so that it does not cause performance issues.
*/
saveBombe() {
- this.bombeEl = document.getElementById("bombe").cloneNode();
- this.bombeEl.setAttribute("width", "100%");
- this.bombeEl.setAttribute("height", "100%");
+ this.bombeEl = document.getElementById("bombe");
+ this.bombeEl.parentNode.removeChild(this.bombeEl);
}
@@ -358,7 +357,7 @@ class OutputWaiter {
const outputLoader = document.getElementById("output-loader"),
outputElement = document.getElementById("output-text"),
- loader = outputLoader.querySelector(".loader");
+ animation = document.getElementById("output-loader-animation");
if (value) {
this.manager.controls.hideStaleIndicator();
@@ -366,7 +365,7 @@ class OutputWaiter {
// Start a timer to add the Bombe to the DOM just before we make it
// visible so that there is no stuttering
this.appendBombeTimeout = setTimeout(function() {
- loader.appendChild(this.bombeEl);
+ animation.appendChild(this.bombeEl);
}.bind(this), 150);
// Show the loading screen
@@ -380,7 +379,7 @@ class OutputWaiter {
// Remove the Bombe from the DOM to save resources
this.outputLoaderTimeout = setTimeout(function () {
try {
- loader.removeChild(this.bombeEl);
+ animation.removeChild(this.bombeEl);
} catch (err) {}
}.bind(this), 500);
outputElement.disabled = false;
diff --git a/src/web/RecipeWaiter.mjs b/src/web/RecipeWaiter.mjs
index b913fede..a8326b27 100755
--- a/src/web/RecipeWaiter.mjs
+++ b/src/web/RecipeWaiter.mjs
@@ -340,10 +340,11 @@ class RecipeWaiter {
/**
* Moves or removes the breakpoint indicator in the recipe based on the position.
*
- * @param {number} position
+ * @param {number|boolean} position - If boolean, turn off all indicators
*/
updateBreakpointIndicator(position) {
const operations = document.querySelectorAll("#rec-list li.operation");
+ if (typeof position === "boolean") position = operations.length;
for (let i = 0; i < operations.length; i++) {
if (i === position) {
operations[i].classList.add("break");
diff --git a/src/web/html/index.html b/src/web/html/index.html
index a1f915b6..478d2bb3 100755
--- a/src/web/html/index.html
+++ b/src/web/html/index.html
@@ -142,9 +142,7 @@
@@ -321,7 +319,9 @@
diff --git a/src/web/static/images/bombe.svg b/src/web/static/images/bombe.svg
index 40857bdf..1fdca842 100644
--- a/src/web/static/images/bombe.svg
+++ b/src/web/static/images/bombe.svg
@@ -56,13 +56,13 @@
-
+
diff --git a/src/web/stylesheets/layout/_io.css b/src/web/stylesheets/layout/_io.css
index 0a1e4ec4..d4af353f 100755
--- a/src/web/stylesheets/layout/_io.css
+++ b/src/web/stylesheets/layout/_io.css
@@ -80,11 +80,13 @@
transition: all 0.5s ease;
}
-#output-loader .loader {
+#output-loader-animation {
+ display: block;
+ position: absolute;
width: 60%;
height: 60%;
- left: unset;
top: 10%;
+ transition: all 0.5s ease;
}
#output-loader .loading-msg {
diff --git a/src/web/stylesheets/preloader.css b/src/web/stylesheets/preloader.css
index bce0cd03..690fe5c1 100755
--- a/src/web/stylesheets/preloader.css
+++ b/src/web/stylesheets/preloader.css
@@ -16,25 +16,54 @@
background-color: var(--secondary-border-colour);
}
-#loader-wrapper div {
- animation: fadeIn 1s ease-in 0s;
-}
-
.loader {
display: block;
+ position: relative;
+ left: 50%;
+ top: 50%;
+ width: 150px;
+ height: 150px;
+ margin: -75px 0 0 -75px;
+
+ border: 3px solid transparent;
+ border-top-color: #3498db;
+ border-radius: 50%;
+
+ animation: spin 2s linear infinite;
+}
+
+.loader:before,
+.loader:after {
+ content: "";
position: absolute;
- left: calc(50% - 200px);
- top: calc(50% - 160px);
- width: 400px;
- height: 260px;
+ border: 3px solid transparent;
+ border-radius: 50%;
+}
+
+.loader:before {
+ top: 5px;
+ left: 5px;
+ right: 5px;
+ bottom: 5px;
+ border-top-color: #e74c3c;
+ animation: spin 3s linear infinite;
+}
+
+.loader:after {
+ top: 13px;
+ left: 13px;
+ right: 13px;
+ bottom: 13px;
+ border-top-color: #f9c922;
+ animation: spin 1.5s linear infinite;
}
.loading-msg {
display: block;
- position: absolute;
+ position: relative;
width: 400px;
left: calc(50% - 200px);
- top: calc(50% + 110px);
+ top: calc(50% + 50px);
text-align: center;
opacity: 0;
font-size: 18px;
@@ -116,6 +145,15 @@
/* Animations */
+@keyframes spin {
+ 0% {
+ transform: rotate(0deg);
+ }
+ 100% {
+ transform: rotate(360deg);
+ }
+}
+
@keyframes bump {
from {
opacity: 0;