2021-12-12 15:00:08 +00:00
|
|
|
<video loop autoplay src="https://goosemod.com/vid/discord_loading.webm"></video>
|
2021-12-12 11:48:50 +00:00
|
|
|
|
|
|
|
<div id="text">Launching...</div>
|
2021-12-09 16:25:14 +00:00
|
|
|
|
|
|
|
<div id="bar-container"></div>
|
|
|
|
<div id="bar-fill"></div>
|
|
|
|
|
|
|
|
<style>
|
2021-12-12 11:48:50 +00:00
|
|
|
@font-face {
|
|
|
|
font-family: Whitney;
|
|
|
|
font-weight: 400;
|
|
|
|
font-style: normal;
|
|
|
|
src: url(https://goosemod.com/font/whitney_400.woff) format("woff");
|
|
|
|
}
|
|
|
|
|
2021-12-09 16:25:14 +00:00
|
|
|
html, body {
|
2021-12-12 11:48:50 +00:00
|
|
|
-webkit-app-region: drag;
|
|
|
|
overflow: hidden;
|
|
|
|
|
2021-12-09 16:25:14 +00:00
|
|
|
margin: 0;
|
|
|
|
padding: 0;
|
2021-12-12 11:55:50 +00:00
|
|
|
width: 100%;
|
|
|
|
height: 100%;
|
2021-12-12 11:48:50 +00:00
|
|
|
|
|
|
|
background: #282b30;
|
2021-12-09 16:25:14 +00:00
|
|
|
|
2021-12-12 11:48:50 +00:00
|
|
|
display: flex;
|
|
|
|
flex-direction: column;
|
|
|
|
justify-content: center;
|
|
|
|
align-items: center;
|
2021-12-09 16:25:14 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
* {
|
2021-12-12 11:48:50 +00:00
|
|
|
font-family: 'Whitney', sans-serif;
|
|
|
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
-webkit-user-select: none;
|
|
|
|
cursor: default;
|
2021-12-09 16:25:14 +00:00
|
|
|
}
|
|
|
|
|
2021-12-12 11:48:50 +00:00
|
|
|
video {
|
|
|
|
width: 200px;
|
|
|
|
height: 150px;
|
|
|
|
object-fit: cover;
|
|
|
|
}
|
2021-12-09 16:25:14 +00:00
|
|
|
|
2021-12-12 11:48:50 +00:00
|
|
|
#text {
|
2021-12-09 16:25:14 +00:00
|
|
|
font-size: 7vw;
|
|
|
|
text-align: center;
|
|
|
|
|
2021-12-12 11:48:50 +00:00
|
|
|
color: #fff;
|
|
|
|
font-weight: 400;
|
|
|
|
font-style: italic;
|
|
|
|
font-size: 16px;
|
|
|
|
|
|
|
|
text-transform: uppercase;
|
2021-12-09 16:25:14 +00:00
|
|
|
|
|
|
|
width: 100%;
|
|
|
|
}
|
|
|
|
|
|
|
|
#bar-container, #bar-fill {
|
2021-12-12 11:48:50 +00:00
|
|
|
margin-top: 10px;
|
2021-12-09 16:25:14 +00:00
|
|
|
transform: translate(-50%, -50%);
|
|
|
|
|
2021-12-12 11:48:50 +00:00
|
|
|
width: 180px;
|
|
|
|
height: 8px;
|
2021-12-09 16:25:14 +00:00
|
|
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
2021-12-12 11:48:50 +00:00
|
|
|
visibility: hidden;
|
2021-12-09 16:25:14 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
#bar-container {
|
2021-12-12 11:48:50 +00:00
|
|
|
position: absolute;
|
|
|
|
background: rgba(255, 255, 255, 0.1);
|
2021-12-09 16:25:14 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
#bar-fill {
|
2021-12-12 11:48:50 +00:00
|
|
|
background-color: #737f8d;
|
2021-12-09 16:25:14 +00:00
|
|
|
width: 0;
|
|
|
|
|
|
|
|
transform: translate(0%, -50%);
|
|
|
|
left: 10%;
|
|
|
|
}
|
|
|
|
</style>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
const text = document.querySelector('#text');
|
|
|
|
|
|
|
|
const barContainer = document.querySelector('#bar-container');
|
|
|
|
const barFill = document.querySelector('#bar-fill');
|
|
|
|
|
|
|
|
DiscordSplash.signalReady();
|
|
|
|
|
2021-12-12 11:48:50 +00:00
|
|
|
const outOfStates = [ 'downloading-updates', 'installing-updates' ];
|
2021-12-09 16:25:14 +00:00
|
|
|
DiscordSplash.onStateUpdate(({ status, current, total, progress }) => {
|
2021-12-12 11:48:50 +00:00
|
|
|
text.textContent = status.replaceAll('-', ' ') + '...';
|
|
|
|
if (outOfStates.includes(state)) text.textContent += ` (${current}/${total})`;
|
2021-12-09 16:25:14 +00:00
|
|
|
|
|
|
|
if (progress) {
|
2021-12-12 11:48:50 +00:00
|
|
|
barContainer.style.visibility = 'visible';
|
|
|
|
barFill.style.visibility = 'visible';
|
2021-12-09 16:25:14 +00:00
|
|
|
|
|
|
|
barFill.style.width = 80 * (progress / 100) + '%';
|
|
|
|
} else {
|
|
|
|
barContainer.style.display = '';
|
|
|
|
barFill.style.display = '';
|
|
|
|
}
|
|
|
|
});
|
|
|
|
</script>
|