thayol/osu-optimizer-php
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Loading animation added

Browse Source
This commit is contained in:
Thayol
2020-12-29 19:12:54 +01:00
parent a6061039e1
commit cb3db37d8c
7 changed files with 99 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
main.php
-1
View File
@@ -1,5 +1,4 @@
<?php <?php
// todo: action onclick to loading screen
// todo: cleanup repacker // todo: cleanup repacker
// todo: cleanup cache // todo: cleanup cache
// todo: cleanup db // todo: cleanup db
templates/body.html
+1 -1
View File
@@ -1,4 +1,4 @@
<!-- https://github.com/Thayol/OsuOptimizerPHP -->
<body id="body"> <body id="body">
{{ CONTENT }} {{ CONTENT }}
<!-- https://github.com/Thayol/OsuOptimizerPHP -->
</body> </body>
templates/loading-screen.html
+77
View File
@@ -0,0 +1,77 @@
<div class="loader">Loading...</div>
<h1 style="text-align:center;">Working...</h1>
<!-- Loading animation by Luke Haas https://github.com/lukehaas/css-loaders -->
<style>
.loader {
color: #FF9800;
color: #448AFF;
color: #FFFFFF;
font-size: 100pt;
text-indent: -9999em;
overflow: hidden;
width: 1em;
height: 1em;
border-radius: 50%;
margin: 72px auto;
position: relative;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
-webkit-animation: load6 2s infinite ease;
animation: load6 2s infinite ease;
}
@-webkit-keyframes load6 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
}
5%,
95% {
box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
}
10%,
59% {
box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em;
}
20% {
box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em;
}
38% {
box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em;
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
}
}
@keyframes load6 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
}
5%,
95% {
box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
}
10%,
59% {
box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em;
}
20% {
box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em;
}
38% {
box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em;
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
}
}
</style>
templates/main-browser-template-mapset.html
+1 -1
View File
@@ -2,5 +2,5 @@
<details class="mapset"> <details class="mapset">
\{\{ MAP_DIFFICULTIES \}\} \{\{ MAP_DIFFICULTIES \}\}
</details> </details>
↑ <a href="./?repack&key=\{\{ MAPSET_KEY \}\}">[ REPACK ]</a> ↑ ↑ <a href="./?repack&key=\{\{ MAPSET_KEY \}\}" target="_blank">[ REPACK ]</a> ↑
</div> </div>
templates/main-option.html
+1 -1
View File
@@ -1,5 +1,5 @@
<div class="option"> <div class="option">
<p class="option-title"><b>{{ MAIN_OPTION_NAME }}</b> <i>{{ MAIN_OPTION_NAME_NOTE }}</i></p> <p class="option-title"><b>{{ MAIN_OPTION_NAME }}</b> <i>{{ MAIN_OPTION_NAME_NOTE }}</i></p>
<p class="option-description">{{ MAIN_OPTION_DESCRIPTION }}</p> <p class="option-description">{{ MAIN_OPTION_DESCRIPTION }}</p>
<p class="option-link-spacer"><br /></p><p class="option-link">{{ MAIN_OPTION_LINK_NOTE }}<a href="{{ MAIN_OPTION_LINK }}">[ {{ MAIN_OPTION_BUTTON }} ]</a></p> <p class="option-link-spacer"><br /></p><p class="option-link">{{ MAIN_OPTION_LINK_NOTE }}<a onclick="displayLoading()" href="{{ MAIN_OPTION_LINK }}">[ {{ MAIN_OPTION_BUTTON }} ]</a></p>
</div> </div>
templates/main-options-script.js
+15
View File
@@ -0,0 +1,15 @@
var loadingContent = "Loading...";
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
loadingContent = this.responseText;
}
};
xmlhttp.open("GET", "templates/loading-screen.html", true);
xmlhttp.send();
function displayLoading() {
document.getElementById("options").style.display = "none";
document.getElementById("loader").innerHTML = loadingContent;
}
templates/main.html
+4 -2
View File
@@ -1,7 +1,7 @@
<div class="main-container"> <div class="main-container">
<h1>osu! optimizer (PHP)</h1> <h1>osu! optimizer (PHP)</h1>
<h3>Version 0.1 by Thayol</h3> <h3>Version 0.1 by Thayol</h3>
<a href="https://github.com/Thayol/OsuOptimizerPHP"><p>[ GitHub ]</p></a> <p><a href="https://github.com/Thayol/OsuOptimizerPHP">[ GitHub ]</a></p>
<div class="main-item"> <div class="main-item">
<h2>Stats</h2> <h2>Stats</h2>
<h3> <h3>
@@ -13,7 +13,9 @@
</div> </div>
<div class="main-item"> <div class="main-item">
<h2>Actions</h2> <h2>Actions</h2>
<div class="options">{{ MAIN_OPTIONS }}</div> <div id="options" class="options">{{ MAIN_OPTIONS }}</div>
<div id="loader"></div>
<script>{{ MAIN_OPTIONS_SCRIPT }}</script>
</div> </div>
<div class="main-item"> <div class="main-item">
<h2 id="a">Browser</h2> <h2 id="a">Browser</h2>