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

Added loading messages to preloader

This commit is contained in:
n1474335 2017-05-19 16:23:52 +00:00
parent 3ee67927a5
commit 347adf688a
3 changed files with 46 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/web/App.js
View File

@ -70,6 +70,9 @@ App.prototype.loaded = function() {
document.getElementById("loader-wrapper").remove();
document.body.classList.remove("loaded");
}, 1000);
// Clear the loading message interval
clearInterval(window.loadingMsgInt);
};

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

@ -34,12 +34,37 @@
<script type="application/javascript">
// Load theme before the preloader is shown
document.querySelector(":root").className = JSON.parse(localStorage.getItem("options")).theme;
// Cycle loading messages
const loadingMsgs = [
"Proving P = NP...",
"Computing 6 x 9...",
"Mining bitcoin...",
"Dividing by 0...",
"Initialising Skynet...",
"[REDACTED]",
"Downloading more RAM...",
"Loading more loading messages...",
"Ordering 1s and 0s...",
"Navigating neural network...",
"Importing machine learning..."
];
function changeLoadingMsg() {
try {
const el = document.getElementById("preloader-msg");
el.className = "loading"; // Causes CSS transition on first message
el.innerHTML = loadingMsgs[Math.floor(Math.random()*loadingMsgs.length)];
} catch (err) {}
}
changeLoadingMsg();
window.loadingMsgsInt = setInterval(changeLoadingMsg, (Math.random()*500) + 500);
</script>
</head>
<body>
<!-- Preloader overlay -->
<div id="loader-wrapper">
<div id="preloader"></div>
<div id="preloader-msg"></div>
</div>
<!-- End preloader overlay -->
<span id="edit-favourites" class="btn btn-default btn-sm"><img aria-hidden="true" src="<%- require('../static/images/favourite-16x16.png') %>" alt="Star Icon"/> Edit</span>

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

@ -55,9 +55,26 @@
animation: spin 1.5s linear infinite;
}
#preloader-msg {
display: block;
position: relative;
width: 300px;
left: calc(50% - 150px);
top: calc(50% + 50px);
text-align: center;
margin-top: 50px;
opacity: 0;
}
#preloader-msg.loading {
opacity: 1;
transition: all 0.1s ease-in;
}
/* Loaded */
.loaded #preloader {
.loaded #preloader,
.loaded #preloader-msg {
opacity: 0;
transition: all 0.3s ease-out;
}