Mirror
/
CyberChef
mirror of https://github.com/gchq/CyberChef.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Replaced loading animation with animated Bombe SVG

This commit is contained in:
n1474335 2019-01-15 19:03:17 +00:00 committed by s2224834
parent ffc4b0a0a8
commit 02b9dbdee9
6 changed files with 349 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/web/App.mjs
View File

@ -51,10 +51,12 @@ class App {
*/
setup() {
document.dispatchEvent(this.manager.appstart);
this.initialiseSplitter();
this.loadLocalStorage();
this.populateOperationsList();
this.manager.setup();
this.manager.output.saveBombe();
this.resetLayout();
this.setCompileMessage();

41
src/web/OutputWaiter.mjs
View File

@ -334,24 +334,55 @@ class OutputWaiter {
/**
* Shows or hides the loading icon.
* Save bombe object before it is removed so that it can be used later
*/
saveBombe() {
this.bombeEl = document.getElementById("bombe").cloneNode();
this.bombeEl.setAttribute("width", "100%");
this.bombeEl.setAttribute("height", "100%");
}
/**
* Shows or hides the output loading screen.
* The animated Bombe SVG, whilst quite aesthetically pleasing, is reasonably CPU
* intensive, so we remove it from the DOM when not in use. We only show it if the
* recipe is taking longer than 200ms. We add it to the DOM just before that so that
* it is ready to fade in without stuttering.
*
* @param {boolean} value
* @param {boolean} value - true == show loader
*/
toggleLoader(value) {
clearTimeout(this.appendBombeTimeout);
clearTimeout(this.outputLoaderTimeout);
const outputLoader = document.getElementById("output-loader"),
outputElement = document.getElementById("output-text");
outputElement = document.getElementById("output-text"),
loader = outputLoader.querySelector(".loader");
if (value) {
this.manager.controls.hideStaleIndicator();
this.bakingStatusTimeout = setTimeout(function() {
// 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);
}.bind(this), 150);
// Show the loading screen
this.outputLoaderTimeout = setTimeout(function() {
outputElement.disabled = true;
outputLoader.style.visibility = "visible";
outputLoader.style.opacity = 1;
this.manager.controls.toggleBakeButtonFunction(true);
}.bind(this), 200);
} else {
clearTimeout(this.bakingStatusTimeout);
// Remove the Bombe from the DOM to save resources
this.outputLoaderTimeout = setTimeout(function () {
try {
loader.removeChild(this.bombeEl);
} catch (err) {}
}.bind(this), 500);
outputElement.disabled = false;
outputLoader.style.opacity = 0;
outputLoader.style.visibility = "hidden";

10
src/web/html/index.html
View File

@ -81,7 +81,11 @@
if (!el.classList.contains("loading"))
el.classList.add("loading"); // Causes CSS transition on first message
el.innerHTML = msg;
} catch (err) {} // Ignore errors if DOM not yet ready
} catch (err) {
// This error was likely caused by the DOM not being ready yet,
// so we wait another second and then try again.
setTimeout(changeLoadingMsg, 1000);
}
}
changeLoadingMsg();
@ -138,7 +142,9 @@
<body>
<!-- Preloader overlay -->
<div id="loader-wrapper">
<div id="preloader" class="loader"></div>
<div id="preloader" class="loader">
<object id="bombe" data="<%- require('../static/images/bombe.svg') %>" width="400"></object>
</div>
<div id="preloader-msg" class="loading-msg"></div>
<div id="preloader-error" class="loading-error"></div>
</div>

261
src/web/static/images/bombe.svg Normal file
View File

@ -0,0 +1,261 @@
<?xml version="1.0" encoding="utf-8"?>
<!--
Turing-Welchman Bombe SVG animation
@author n1474335 [n1474335@gmail.com]
@copyright Crown Copyright 2019
@license Apache-2.0
-->
<svg version="1.2" baseProfile="tiny" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px" y="0px" width="550px" height="350px" viewBox="0 0 550 350" xml:space="preserve" onload="setup(evt)">
<script type="text/ecmascript">
// <![CDATA[
function setup(evt) {
const allRotors = evt.target.ownerDocument.querySelectorAll('.rotor');
const rotors = [];
const initTime = Date.now();
const tick = 360/26;
const speed = 1000; // Time for one full rotation of the fast rotor
for (const rotor of allRotors) {
const row = parseInt(rotor.classList.value.match(/row(\d)/)[1], 10);
const startPos = row === 2 ? tick * Math.floor(Math.random()*26) : 0;
const bbox = rotor.getBBox();
const x = bbox.width/2 + bbox.x;
const y = bbox.height/2 + bbox.y;
const wait = row === 0 ? speed/26 : row === 1 ? speed : speed*26;
rotor.setAttribute("transform", "rotate(" + startPos + ", " + x + ", " + y + ")");
rotors.push({
el: rotor,
pos: startPos,
x: x,
y: y,
last: initTime,
wait: wait
});
}
setInterval(function() {
const now = Date.now();
for (const rotor of rotors) {
if (now > (rotor.last + rotor.wait)) {
const numTicks = Math.floor((now - rotor.last) / rotor.wait);
rotor.pos = (rotor.pos + tick * numTicks) % 360;
rotor.last = rotor.last + rotor.wait * numTicks;
rotor.el.setAttribute("transform", "rotate(" + rotor.pos + ", " + rotor.x + ", " + rotor.y + ")");
} else {
// Don't bother looking at the rest
break;
}
}
}, speed/26 - 5);
}
// ]]>
</script>
<style>
.row0 {--primary-color: #e5d41b;}
.row1 {--primary-color: #BE1E2D;}
.row2 {--primary-color: #337f24;}
</style>
<symbol id="rotor">
<g transform="scale(0.1)">
<circle id="casing" class="ring-color" style="fill: var(--primary-color, #BE1E2D)" cx="692" cy="674" r="505"/>
<circle id="alphabet-ring" fill="#7a5340" cx="692" cy="674" r="477"/>
<circle id="face" fill="#412612" cx="692" cy="674" r="412"/>
<circle id="plate" fill="#F1F2F2" cx="692" cy="674" r="185"/>
<g id="alphabet" fill="#ffffff" font-family="sans-serif" font-size="36">
<text transform="matrix(0.9731 0.2303 -0.2303 0.9731 779.8848 256.5488)">Z</text>
<text transform="matrix(0.8903 0.4554 -0.4554 0.8903 875.2021 288.6948)">Y</text>
<text transform="matrix(0.7561 0.6545 -0.6545 0.7561 961.8311 343.6372)">X</text>
<text transform="matrix(0.5696 0.8219 -0.8219 0.5696 1033.0146 417.4619)">W</text>
<text transform="matrix(0.3454 0.9385 -0.9385 0.3454 1088.1104 515.4634)">V</text>
<text transform="matrix(0.1078 0.9942 -0.9942 0.1078 1114.4678 614.5894)">U</text>
<text transform="matrix(-0.1302 0.9915 -0.9915 -0.1302 1116.1533 719.1523)">T</text>
<text transform="matrix(-0.3623 0.9321 -0.9321 -0.3623 1093.8984 817.2373)">S</text>
<text transform="matrix(-0.5767 0.817 -0.817 -0.5767 1048.0635 908.9912)">R</text>
<text transform="matrix(-0.7588 0.6514 -0.6514 -0.7588 980.2002 988.5342)">Q</text>
<text transform="matrix(-0.8942 0.4476 -0.4476 -0.8942 893.3154 1050.1416)">P</text>
<text transform="matrix(-0.9766 0.215 -0.215 -0.9766 797.7471 1087.3965)">O</text>
<text transform="matrix(-0.9996 -0.0298 0.0298 -0.9996 692.0405 1100.5684)">N</text>
<text transform="matrix(-0.961 -0.2765 0.2765 -0.961 588.2832 1087.9443)">M</text>
<text transform="matrix(-0.8654 -0.5011 0.5011 -0.8654 487.3003 1048.2471)">L</text>
<text transform="matrix(-0.7244 -0.6894 0.6894 -0.7244 406.814 991.1895)">K</text>
<text transform="matrix(-0.5456 -0.838 0.838 -0.5456 339.3418 913.8809)">J</text>
<text transform="matrix(-0.3508 -0.9364 0.9364 -0.3508 294.3491 828.2446)">I</text>
<text transform="matrix(-0.1295 -0.9916 0.9916 -0.1295 270.9233 742.6519)">H</text>
<text transform="matrix(0.1153 -0.9933 0.9933 0.1153 266.8784 638.1958)">G</text>
<text transform="matrix(0.3526 -0.9358 0.9358 0.3526 288.9976 533.9849)">F</text>
<text transform="matrix(0.5645 -0.8255 0.8255 0.5645 333.0195 443.5317)">E</text>
<text transform="matrix(0.7459 -0.666 0.666 0.7459 398.4409 364.5073)">D</text>
<text transform="matrix(0.8853 -0.4651 0.4651 0.8853 482.4824 302.3418)">C</text>
<text transform="matrix(0.9716 -0.2365 0.2365 0.9716 579.1396 262.5479)">B</text>
<text transform="matrix(0.9999 0.0162 -0.0162 0.9999 680.5581 247.4321)">A</text>
</g>
<g id="holes">
<circle stroke="#C49A6C" cx="692" cy="438.782" r="40.816"/>
<circle stroke="#C49A6C" cx="927.219" cy="674" r="40.816"/>
<circle stroke="#C49A6C" cx="692" cy="909.219" r="40.816"/>
<circle stroke="#C49A6C" cx="456.781" cy="674" r="40.816"/>
<circle stroke="#C49A6C" cx="574.391" cy="470.295" r="40.816"/>
<circle stroke="#C49A6C" cx="895.706" cy="556.39" r="40.816"/>
<circle stroke="#C49A6C" cx="809.609" cy="877.706" r="40.816"/>
<circle stroke="#C49A6C" cx="488.295" cy="791.609" r="40.816"/>
<circle stroke="#C49A6C" cx="488.295" cy="556.39" r="40.816"/>
<circle stroke="#C49A6C" cx="809.609" cy="470.293" r="40.816"/>
<circle stroke="#C49A6C" cx="895.706" cy="791.609" r="40.816"/>
<circle stroke="#C49A6C" cx="574.391" cy="877.705" r="40.816"/>
</g>
<g id="plate-screws">
<g>
<circle fill="#BCBEC0" stroke="#808285" stroke-width="2" cx="693.223" cy="543.521" r="25.342"/>
<line fill="#939598" stroke="#808285" stroke-width="7" x1="693.446" y1="519.729" x2="693" y2="567.311"/>
</g>
<g>
<circle fill="#BCBEC0" stroke="#808285" stroke-width="2" cx="822.479" cy="675.221" r="25.342"/>
<line fill="#939598" stroke="#808285" stroke-width="7" x1="798.689" y1="674.999" x2="846.271" y2="675.445"/>
</g>
<g>
<circle fill="#BCBEC0" stroke="#808285" stroke-width="2" cx="562.605" cy="673.886" r="25.341"/>
<line fill="#939598" stroke="#808285" stroke-width="7" x1="538.814" y1="673.663" x2="586.396" y2="674.108"/>
</g>
<g>
<circle fill="#BCBEC0" stroke="#808285" stroke-width="2" cx="691.863" cy="805.587" r="25.341"/>
<line fill="#939598" stroke="#808285" stroke-width="7" x1="692.086" y1="781.798" x2="691.64" y2="829.379"/>
</g>
</g>
<path id="pin" fill-rule="evenodd" fill="#D1D3D4" stroke="#939598"
d="M956.275,448.71c-0.969,0.389-1.924,0.836-2.848,1.302
c-5.875,2.962-10.965,7.197-16.168,11.152c-5.885,4.475-11.93,8.739-17.834,13.187c-10.688,8.049-21.533,15.888-32.24,23.907
c-2.199,1.643-4.436,3.238-6.609,4.912c-14.525,11.139-28.867,22.534-43.559,33.452c-9.428,7.004-19.436,13.346-28.354,21.005
c-12.459,10.694-24.723,22.592-35.869,34.65c-5.281,5.711-10.656,11.297-16.243,16.711c-3.063,2.967-5.874,5.382-8.114,8.997
c-2.256,3.646-4.589,7.558-6.059,11.586c-2.757,7.565,0.999,14.189,3.413,21.241c5.533,16.161-0.56,32.288-11.42,44.675
c-6.989,7.974-15.39,15.932-25.247,20.16c-5.45,2.337-12.057,3.965-18.012,4.105c-6.159,0.148-11.914-1.53-17.568-3.802
c-5.215-2.094-14.936-7.879-20.029-3.758c-4.529,3.667-8.937,7.59-13.502,11.251c-1.359,1.088-2.961,2.043-4.15,3.33
c0.001,0,16.224-17.545,16.596-17.948c2.86-3.092,0.168-9.246-1.066-12.486c-2.088-5.471-3.199-10.951-4.633-16.611
c-1.02-4.023-1.841-8.044-1.548-12.215c0.637-9.093,3.98-19.698,8.918-27.356c6.4-9.925,16.834-18.061,27.527-22.879
c14.831-6.684,29.543-3.252,44.133,2.23c5.441,2.044,12.285-2.206,16.829-4.831c6.116-3.534,11.542-8.171,16.117-13.547
c9.109-10.707,19.505-20.119,29.089-30.368c4.945-5.288,10.229-10.295,15.316-15.45l25.586-29.884l31.963-43.979
c0,0,29.025-38.288,29.113-38.409c9.037-11.917,24.822-22.94,25.588-39.161c0.617-13.024-14.27-17.184-24.727-16.841
c-7.41,0.242-16.311,0.894-23.117,4.161c-15.1,7.248-28.342,15.616-34.676,31.979c-2.504,6.464-4.865,12.671-6.76,19.319
c-2.051,7.208-5.539,11.212-9.826,17.088c-10.779,14.778-24.389,24.73-40.998,32.1c-4.74,2.104-9.229,4.293-14.08,6.129
c-3.961,1.5-9.706,3.104-12.91,5.747c-5.948,4.907-10.334,14.214-13.357,21.205c-1.911,4.418-3.278,9.046-5.009,13.535
c-2.069,5.37-2.532,11.326-4.88,16.507c-1.33,2.935-1.91,5.994-4.104,8.414c-2.609,2.877-4.623,4.939-8.159,6.693
c-3.45,1.713-6.487,3.997-10.305,4.736c-2.717,0.528-5.277,1.418-8.023,1.794c-8.203,1.127-16.54,1.73-24.695,3.159
c-3.994,0.7-7.947,2.283-11.792,3.534c-5.167,1.681-10.116,5.972-14.846,8.78c-10.3,6.119-20.007,15.004-27.479,24.277
c-5.337,6.625-8.976,14.32-11.926,22.251c-2.169,5.833-4.357,11.754-5.061,17.977c-0.564,5.001-0.074,10.062-0.502,15.077
c-0.706,8.26-3.203,17.47-9.294,23.414c-5.363,5.234-14.174,10.834-21.666,12.043c-7.607,1.226-15.016,0.118-20.697-5.407
c-5.092-4.954-9.277-11.304-15.816-14.539c-3.873-1.917-8.116-2.357-12.351-1.588c-10.82,1.965-17.767,7.374-18.428,18.637
c-0.545,9.325,1.999,15.171,6.731,22.947c4.323,7.103,5.315,15.456,9.255,22.756c4.052,7.503,7.825,15.248,12.169,22.583
c3.05,5.156,6.832,9.664,10.749,14.176c1.717,1.978,3.554,4.901,5.732,6.378c5.639,3.827,10.784,3.305,17.032,1.951
c2.175-0.473,3.233,0.047,4.694,1.679c1.557,1.74,1.399,1.609,0.505,3.68c-2.732,6.329-4.573,12.085-0.1,18.199
c3.421,4.675,8.728,9.01,13.531,12.271c7.165,4.865,14.799,8.835,22.414,12.933c8.94,4.808,18.489,8.188,27.963,11.765
c6.597,2.491,11.068,7.997,17.229,11.186c6.945,3.595,13.775,1.032,19.691-3.353c5.688-4.216,9.634-9.578,10.066-16.804
c0.415-6.938-1.239-14.501-5.51-20.082c-4.163-5.439-10.751-8.996-13.229-15.664c-2.506-6.741-0.296-14.597,1.313-21.3
c1.606-6.687,3.798-12.642,9.227-17.17c5.458-4.554,12.49-7.653,19.583-8.294c7.954-0.721,15.985-0.105,23.912-1.162
c7.9-1.052,15.855-4.074,22.918-7.696c5.104-2.616,9.105-6.979,13.309-10.789c8.875-8.052,18.1-16.759,23.735-27.459
c4.125-7.834,8.521-15.675,11.016-24.222c1.154-3.962,2.098-8.083,2.316-12.204c0.424-7.886-1.686-16.176,2.564-23.391
c5.645-9.582,14.869-17.408,25.563-20.561c8.727-2.571,17.697-4.624,25.963-8.522c7.234-3.413,16-7.686,20.182-14.833
c1.822-3.116,3.109-6.775,4.361-10.158c1.752-4.719,3.648-9.389,5.4-14.108c2.082-5.625,4.016-10.898,6.887-16.146
c2.551-4.656,6.072-7.849,9.471-11.864c2.504-2.956,4.539-5.815,7.773-8.031c3.229-2.208,6.805-3.835,10.088-5.952
c3.469-2.237,6.955-4.47,10.578-6.445c4.242-2.312,8.557-3.716,13.207-4.92c10.176-2.643,19.592-6.376,26.959-14.134
c6.977-7.349,13.82-15.747,16.816-25.566c2.938-9.634,3.967-20.147,2.086-30.07c-0.973-5.124-2.291-11.331-5.824-15.367
C964.873,446.457,960.432,447.042,956.275,448.71z"/>
<circle id="center-nut" fill="#d1a26a" stroke="#a88e75" stroke-width="25" cx="692" cy="674" r="60"/>
<g id="pin-screws">
<circle fill="#BCBEC0" stroke="#58595B" cx="768.174" cy="545.468" r="18.485"/>
<line fill="#BCBEC0" stroke="#939598" stroke-width="5" x1="750.079" y1="545.298" x2="786.273" y2="545.635"/>
<path fill="#BCBEC0" stroke="#58595B" d="M819.834,579.439c-10.211-0.094-18.564,8.103-18.66,18.313
c-0.094,10.208,8.102,18.562,18.313,18.657c10.205,0.095,18.563-8.102,18.656-18.312
C838.24,587.889,830.041,579.535,819.834,579.439z"/>
<line fill="#BCBEC0" stroke="#939598" stroke-width="5" x1="819.49" y1="616.02" x2="819.826" y2="579.826"/>
<circle fill="#BCBEC0" stroke="#58595B" cx="626.351" cy="736.463" r="18.486"/>
<line fill="#BCBEC0" stroke="#939598" stroke-width="5" x1="639.026" y1="749.378" x2="613.672" y2="723.543"/>
<circle fill="#BCBEC0" stroke="#58595B" cx="526.668" cy="709.157" r="18.485"/>
<line fill="#BCBEC0" stroke="#939598" stroke-width="5" x1="526.498" y1="727.252" x2="526.837" y2="691.059"/>
<circle fill="#BCBEC0" stroke="#58595B" cx="654.839" cy="839.752" r="18.486"/>
<line fill="#BCBEC0" stroke="#939598" stroke-width="5" x1="636.744" y1="839.583" x2="672.937" y2="839.922"/>
</g>
<g id="plate-mini-screws">
<circle fill="#E6E7E8" stroke="#A7A9AC" cx="786.206" cy="769.987" r="15.332"/>
<line fill="#E6E7E8" stroke="#A7A9AC" stroke-width="5" x1="775.494" y1="780.5" x2="796.92" y2="759.472"/>
<circle fill="#E6E7E8" stroke="#A7A9AC" cx="599.966" cy="580.227" r="15.333"/>
<line fill="#E6E7E8" stroke="#A7A9AC" stroke-width="5" x1="589.254" y1="590.74" x2="610.682" y2="569.712"/>
</g>
<g id="spring">
<line fill="none" stroke="#808285" stroke-width="2" x1="561.307" y1="722.169" x2="534.592" y2="739.515"/>
<line fill="none" stroke="#808285" stroke-width="2" x1="565.744" y1="726.689" x2="539.028" y2="744.034"/>
<line fill="none" stroke="#808285" stroke-width="2" x1="570.179" y1="731.21" x2="543.465" y2="748.555"/>
<line fill="none" stroke="#808285" stroke-width="2" x1="574.616" y1="735.73" x2="547.901" y2="753.074"/>
<line fill="none" stroke="#808285" stroke-width="2" x1="579.052" y1="740.25" x2="552.336" y2="757.596"/>
<line fill="none" stroke="#808285" stroke-width="2" x1="583.722" y1="745.008" x2="557.007" y2="762.354"/>
<line fill="none" stroke="#808285" stroke-width="2" x1="588.158" y1="749.529" x2="561.443" y2="766.873"/>
<line fill="none" stroke="#808285" stroke-width="2" x1="592.595" y1="754.047" x2="565.879" y2="771.393"/>
<line fill="none" stroke="#808285" stroke-width="2" x1="597.03" y1="758.568" x2="570.315" y2="775.913"/>
<line fill="none" stroke="#808285" stroke-width="2" x1="601.466" y1="763.088" x2="574.751" y2="780.434"/>
<line fill="none" stroke="#808285" stroke-width="2" x1="605.902" y1="767.608" x2="579.188" y2="784.953"/>
<line fill="none" stroke="#808285" stroke-width="2" x1="610.338" y1="772.128" x2="583.623" y2="789.474"/>
<line fill="none" stroke="#808285" stroke-width="2" x1="614.775" y1="776.647" x2="588.06" y2="793.994"/>
<line fill="none" stroke="#808285" stroke-width="2" x1="619.211" y1="781.169" x2="592.496" y2="798.513"/>
<line fill="none" stroke="#808285" stroke-width="2" x1="623.648" y1="785.688" x2="596.933" y2="803.034"/>
<line fill="none" stroke="#808285" stroke-width="2" x1="628.084" y1="790.209" x2="601.369" y2="807.553"/>
<line fill="none" stroke="#808285" stroke-width="2" x1="632.52" y1="794.728" x2="605.806" y2="812.074"/>
<line fill="none" stroke="#808285" stroke-width="2" x1="636.956" y1="799.249" x2="610.241" y2="816.593"/>
<line fill="none" stroke="#808285" stroke-width="2" x1="641.393" y1="803.77" x2="614.678" y2="821.113"/>
<line fill="none" stroke="#808285" stroke-width="2" x1="645.83" y1="808.288" x2="619.114" y2="825.634"/>
</g>
<g id="face-nuts">
<g>
<polygon fill-rule="evenodd" fill="#E6E7E8" stroke="#939598" points="340.617,715.657 300.423,704.888
289.653,664.693 319.077,635.27 359.271,646.04 370.041,686.233 "/>
<path fill="#BCBEC0" stroke="#58595B" stroke-width="3" d="M306.759,698.144
c-12.516-12.755-12.326-33.236,0.428-45.752c12.752-12.516,33.234-12.324,45.75,0.431c12.516,12.75,12.324,33.233-0.428,45.748
C339.755,711.087,319.275,710.895,306.759,698.144z"/>
<line fill="#939598" stroke="#808285" stroke-width="7" x1="351.527" y1="654.208" x2="308.171" y2="696.757"/>
</g>
<g>
<polygon fill-rule="evenodd" fill="#E6E7E8" stroke="#939598" points="702.77,354.86 662.576,344.091
651.806,303.896 681.23,274.473 721.424,285.243 732.194,325.437 "/>
<path fill="#603913" stroke="#3C2415" stroke-width="3" d="M668.912,337.347c-12.516-12.755-12.325-33.236,0.428-45.752c12.752-12.516,33.235-12.324,45.75,0.431
c12.516,12.75,12.324,33.233-0.428,45.748C701.909,350.29,681.428,350.098,668.912,337.347z"/>
<line fill="#939598" stroke="#3C2415" stroke-width="7" x1="713.68" y1="293.411" x2="670.324" y2="335.96"/>
<line fill="#939598" stroke="#3C2415" stroke-width="7" x1="670.324" y1="293.392" x2="713.68" y2="335.941"/>
</g>
<g>
<polygon fill-rule="evenodd" fill="#E6E7E8" stroke="#939598" points="702.77,1072.723 662.576,1061.953
651.806,1021.759 681.23,992.335 721.424,1003.105 732.193,1043.299 "/>
<path fill="#603913" stroke="#3C2415" stroke-width="3" d="M668.912,1055.21c-12.516-12.756-12.325-33.236,0.428-45.752c12.752-12.516,33.235-12.324,45.75,0.431
c12.516,12.75,12.324,33.233-0.428,45.747C701.909,1068.152,681.428,1067.96,668.912,1055.21z"/>
<line fill="#939598" stroke="#3C2415" stroke-width="7" x1="713.68" y1="1011.272" x2="670.324" y2="1053.822"/>
<line fill="#939598" stroke="#3C2415" stroke-width="7" x1="670.324" y1="1011.254" x2="713.68" y2="1053.804"/>
</g>
<g>
<polygon fill-rule="evenodd" fill="#E6E7E8" stroke="#939598" points="1038.556,715.658 1078.749,704.888
1089.521,664.694 1060.097,635.27 1019.901,646.041 1009.132,686.234 "/>
<path fill="#BCBEC0" stroke="#58595B" stroke-width="3" d="M1072.413,698.145
c12.516-12.755,12.326-33.236-0.428-45.752c-12.752-12.516-33.234-12.324-45.75,0.431c-12.516,12.75-12.324,33.233,0.428,45.748
C1039.417,711.087,1059.897,710.896,1072.413,698.145z"/>
<line fill="#939598" stroke="#808285" stroke-width="7" x1="1027.646" y1="654.208" x2="1071.001" y2="696.757"/>
</g>
</g>
</g>
</symbol>
<g class="rotor row0"><use xlink:href="#rotor" x="0" y="0" /></g>
<g class="rotor row0"><use xlink:href="#rotor" x="105" y="0" /></g>
<g class="rotor row0"><use xlink:href="#rotor" x="210" y="0" /></g>
<g class="rotor row0"><use xlink:href="#rotor" x="315" y="0" /></g>
<g class="rotor row0"><use xlink:href="#rotor" x="420" y="0" /></g>
<g class="rotor row1"><use xlink:href="#rotor" x="0" y="105" /></g>
<g class="rotor row1"><use xlink:href="#rotor" x="105" y="105" /></g>
<g class="rotor row1"><use xlink:href="#rotor" x="210" y="105" /></g>
<g class="rotor row1"><use xlink:href="#rotor" x="315" y="105" /></g>
<g class="rotor row1"><use xlink:href="#rotor" x="420" y="105" /></g>
<g class="rotor row2"><use xlink:href="#rotor" x="0" y="210" /></g>
<g class="rotor row2"><use xlink:href="#rotor" x="105" y="210" /></g>
<g class="rotor row2"><use xlink:href="#rotor" x="210" y="210" /></g>
<g class="rotor row2"><use xlink:href="#rotor" x="315" y="210" /></g>
<g class="rotor row2"><use xlink:href="#rotor" x="420" y="210" /></g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 20 KiB

32
src/web/stylesheets/layout/_io.css
View File

@ -73,6 +73,28 @@
background-color: var(--primary-background-colour);
visibility: hidden;
opacity: 0;
display: flex;
justify-content: center;
align-items: center;
transition: all 0.5s ease;
}
#output-loader .loader {
width: 60%;
height: 60%;
left: unset;
top: 10%;
}
#output-loader .loading-msg {
opacity: 1;
font-family: var(--primary-font-family);
line-height: var(--primary-line-height);
color: var(--primary-font-colour);
left: unset;
top: 30%;
position: relative;
transition: all 0.5s ease;
}
@ -138,16 +160,6 @@
margin-bottom: 5px;
}
#output-loader .loading-msg {
opacity: 1;
font-family: var(--primary-font-family);
line-height: var(--primary-line-height);
color: var(--primary-font-colour);
top: 50%;
transition: all 0.5s ease;
}
#magic {
opacity: 1;
visibility: visibile;

69
src/web/stylesheets/preloader.css
View File

@ -16,57 +16,28 @@
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;
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;
left: calc(50% - 200px);
top: calc(50% - 160px);
width: 400px;
height: 260px;
}
.loading-msg {
display: block;
position: relative;
position: absolute;
width: 400px;
left: calc(50% - 200px);
top: calc(50% + 50px);
top: calc(50% + 110px);
text-align: center;
margin-top: 50px;
opacity: 0;
font-size: 18px;
}
.loading-msg.loading {
@ -145,18 +116,18 @@
/* Animations */
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes bump {
from {
opacity: 0;
transform: translate3d(0, 200px, 0);
}
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}