Add Loadscreen

main
Samuel Zielke 2 years ago
parent e2fdb63cb1
commit cef031e51f

@ -20,42 +20,9 @@ img.pb {
height: auto; height: auto;
} }
.load_body{ .gif {
position: absolute;
top: 50%; top: 50%;
left: 45%; left: 50%;
transform: translate(-50%,-50%); position: fixed;
background-color: #2a9d8f; transform: translate(-50%, -50%);
} }
.progress{
position: relative;
height: 10px;
width: 1110%;
border: 10px solid #f4a261;
border-radius: 15px;
}
.progress .color{
position: absolute;
background-color: #ffffff;
width: 0px;
height: 10px;
border-radius: 15px;
animation: progres 4s infinite linear;
}
@keyframes progres{
0%{
width: 0%;
}
25%{
width: 50%;
}
50%{
width: 75%;
}
75%{
width: 85%;
}
100%{
width: 100%;
}
};

Binary file not shown.

After

Width:  |  Height:  |  Size: 207 KiB

@ -16,11 +16,21 @@
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" /> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
<title>Meeting Organizer</title> <title>Meeting Organizer</title>
</head> </head>
<body> <body style="overflow: hidden;">
{% block pushup %} {% block pushup %}
{% endblock %} {% endblock %}
<div id="loading" class="load_body d-none" style="width: 100%; height: 110vh; position: absolute; background-color: white; z-index: 100; margin-top: -2rem;">
<!-- <img src="{% static 'img/1484.gif' %}" class="gif" alt="load"> -->
<div class="gif">
<h2 style="color: black;">Daten Speichern und Senden...</h2>
</div>
</div>
<script>
</script>
<div class="container" style="max-width: 100%;"> <div class="container" style="max-width: 100%;">
<div class="top_line row justify-content-between"> <div class="top_line row justify-content-between">
<div class="title col-6 text-start dropdown"> <div class="title col-6 text-start dropdown">
@ -51,11 +61,7 @@
</ul> </ul>
</div> </div>
</div> </div>
<div class="load_body">
<div class="progress">
<div class="color"></div>
</div>
</div>
{% block content %} {% block content %}
{% endblock %} {% endblock %}

@ -447,8 +447,15 @@
</table> </table>
</div> </div>
<p style="display: none;">!Technik_END!</p> <p style="display: none;">!Technik_END!</p>
<script>
function sendform(){
document.getElementById('loading').classList.remove("d-none")
document.getElementById("formsend").click()
}
</script>
<div class="formcontrol"> <div class="formcontrol">
<button type="submit" class="btn btn-secondary" name="formsend">Speichern</button> <button type="button" onclick="sendform()" class="btn btn-secondary" name="">Speichern</button>
<button type="submit" class="btn btn-secondary d-none" name="formsend" id="formsend">Speichern</button>
</div> </div>
</form> </form>
</div> </div>

@ -664,10 +664,10 @@
const req = new XMLHttpRequest(); const req = new XMLHttpRequest();
req.open("GET", "http://mo.samuelzielke.de/api/", false); req.open("GET", "http://mo.samuelzielke.de/api/", false);
req.send(); req.send()
myDATA = JSON.parse(req.response); myDATA = JSON.parse(req.response);
console.log(myDATA)
setData(myDATA) setData(myDATA)
</script> </script>
</body> </body>

Loading…
Cancel
Save

Powered by TurnKey Linux.