mirrors/CyberChef
1
0
Fork 0
mirror of https://github.com/gchq/CyberChef.git synced 2025-04-20 23:06:16 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Added loading messages to preloader

Browse source
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
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.getElementById("loader-wrapper").remove();
document.body.classList.remove("loaded"); document.body.classList.remove("loaded");
}, 1000); }, 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"> <script type="application/javascript">
// Load theme before the preloader is shown // Load theme before the preloader is shown
document.querySelector(":root").className = JSON.parse(localStorage.getItem("options")).theme; 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> </script>
</head> </head>
<body> <body>
<!-- Preloader overlay --> <!-- Preloader overlay -->
<div id="loader-wrapper"> <div id="loader-wrapper">
<div id="preloader"></div> <div id="preloader"></div>
<div id="preloader-msg"></div>
</div> </div>
<!-- End preloader overlay --> <!-- 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> <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; 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 */
.loaded #preloader { .loaded #preloader,
.loaded #preloader-msg {
opacity: 0; opacity: 0;
transition: all 0.3s ease-out; transition: all 0.3s ease-out;
} }