Leahnaya/TableturfBattleApp
1
0
Fork 0
mirror of https://github.com/AndrioCelos/TableturfBattleApp.git synced 2026-08-20 18:04:00 -05:00
Code Issues Actions Packages Projects Releases Wiki Activity

Replace the loading spinner with the Splatoon one

Browse Source 
The asset isn't included in this repository for copyright reasons, but will be available on the live site
This commit is contained in:
Andrio Celos
2023-08-12 18:09:13 +10:00
parent 07e046f669
commit 38fc94f4e4
2 changed files with 10 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
TableturfBattleClient/index.html
View File

@@ -55,7 +55,7 @@
<a id="preGameHelpButton" href="help">Help</a>
</p>
<div id="preGameLoadingSection" class="loadingContainer" hidden>
<div class="lds-ripple"><div></div><div></div></div> <span id="preGameLoadingLabel"></span>
<div class="loadingSpinner"><div></div><div></div></div> <span id="preGameLoadingLabel"></span>
</div>
</form>
<footer>
@@ -79,13 +79,13 @@
<div class="submitButtonContainer">
<button type="submit" id="submitStageButton">Submit</button>
<div class="loadingContainer">
<div class="lds-ripple"><div></div><div></div></div>
<div class="loadingSpinner"><div></div><div></div></div>
</div>
</div>
<div id="stageList">
<button type="button" id="stageRandomButton" class="stageRandom">Random</button>
</div>
<div id="stageListLoadingSection"><div class="lds-ripple"><div></div><div></div></div> Loading stages...</div>
<div id="stageListLoadingSection"><div class="loadingSpinner"><div></div><div></div></div> Loading stages...</div>
</form>
</section>
<div id="lobbyDeckSection" hidden>
@@ -94,7 +94,7 @@
<div class="submitButtonContainer">
<button type="submit" id="submitDeckButton" disabled>Submit</button>
<div class="loadingContainer">
<div class="lds-ripple"><div></div><div></div></div>
<div class="loadingSpinner"><div></div><div></div></div>
</div>
</div>
<div id="lobbyDeckList" class="deckList"></div>

48
TableturfBattleClient/tableturf.css
View File

@@ -1691,7 +1691,7 @@ dialog::backdrop {
}
}
/* Loading spinner - based on loading.io */
/* Loading spinner */
.loadingContainer:not([hidden]) {
display: flex;
@@ -1699,50 +1699,14 @@ dialog::backdrop {
align-items: center;
gap: 0.5em;
}
.lds-ripple {
--border-width: 0.15em;
.loadingSpinner {
background: url(assets/external/IconUp_00.webp) center/cover;
position: relative;
width: 1.5em;
height: 1.5em;
display: inline-block;
animation: 2s infinite linear loadingSpinner;
}
.lds-ripple div {
position: absolute;
border: var(--border-width) solid #fff;
opacity: 1;
border-radius: 50%;
animation: 1s cubic-bezier(0, 0.2, 0.8, 1) infinite lds-ripple;
}
.lds-ripple div:nth-child(2) {
animation-delay: -0.5s;
}
@keyframes lds-ripple {
0% {
top: calc(50% - var(--border-width));
left: calc(50% - var(--border-width));
right: calc(50% - var(--border-width));
bottom: calc(50% - var(--border-width));
opacity: 0;
}
4.9% {
top: calc(50% - var(--border-width));
left: calc(50% - var(--border-width));
right: calc(50% - var(--border-width));
bottom: calc(50% - var(--border-width));
opacity: 0;
}
5% {
top: calc(50% - var(--border-width));
left: calc(50% - var(--border-width));
right: calc(50% - var(--border-width));
bottom: calc(50% - var(--border-width));
opacity: 1;
}
100% {
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0;
}
@keyframes loadingSpinner {
to { transform: rotate(360deg); }
}