0
Ich habe einen funktionierenden Ladebildschirm, der funktioniert. Das Problem ist, dass es bei jedem Nachladen angezeigt wird. Wie kann ich dies nur anzeigen lassen, wenn ich mich anmelde? Ich habe angefangen, irgendwie auf eine Funktion zu schauen, um es aus der login.php anzuzeigen? Meine Sorge dort ist, wie man die Funktion von PHP anruft. Jede Hilfe wird geschätzt. Vielen Dank!Anzeige meines Ladebildschirms nur beim Einloggen
$(document).ready(function() {
setTimeout(function(){
$('body').addClass('loaded');
}, 700);
});#loader-wrapper {
position: absolute;
left: 0;
height: 100vh;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
#loader-wrapper .loader-section {
position: fixed;
top: 0;
width: 51%;
height: 100%;
background: rgb(33, 33, 33);
z-index: 1000;
}
#loader-wrapper .loader-section.section-left {
left: 0;
}
#loader-wrapper .loader-section.section-right {
right: 0;
}
#loader {
display: block;
position: relative;
width: 150px;
height: 150px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: #3498db;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
z-index: 1001;
}
#loader:before {
content: "";
position: absolute;
top: 5px;
left: 5px;
right: 5px;
bottom: 5px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: #e74c3c;
-webkit-animation: spin 3s linear infinite;
animation: spin 3s linear infinite;
}
#loader:after {
content: "";
position: absolute;
top: 15px;
left: 15px;
right: 15px;
bottom: 15px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: #f9c922;
-webkit-animation: spin 1.5s linear infinite;
animation: spin 1.5s linear infinite;
}
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
/* Chrome, Opera 15+, Safari 3.1+ */
-ms-transform: rotate(0deg);
/* IE 9 */
transform: rotate(0deg);
/* Firefox 16+, IE 10+, Opera */
}
100% {
-webkit-transform: rotate(360deg);
/* Chrome, Opera 15+, Safari 3.1+ */
-ms-transform: rotate(360deg);
/* IE 9 */
transform: rotate(360deg);
/* Firefox 16+, IE 10+, Opera */
}
}
@keyframes spin {
0% {
-webkit-transform: rotate(0deg);
/* Chrome, Opera 15+, Safari 3.1+ */
-ms-transform: rotate(0deg);
/* IE 9 */
transform: rotate(0deg);
/* Firefox 16+, IE 10+, Opera */
}
100% {
-webkit-transform: rotate(360deg);
/* Chrome, Opera 15+, Safari 3.1+ */
-ms-transform: rotate(360deg);
/* IE 9 */
transform: rotate(360deg);
/* Firefox 16+, IE 10+, Opera */
}
}
.loaded #loader {
opacity: 0;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.loaded #loader-wrapper {
visibility: hidden;
-webkit-transition: all 0.3s 0.3s ease-out;
transition: all 0.3s 0.3s ease-out;
}
.no-js #loader-wrapper {
display: none;
}
.no-js h1 {
color: #222222;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="loader-wrapper">
<div id="loader"></div>
<div class="loader-section section-left"></div>
<div class="loader-section section-right"></div>
</div>
<h1> logged in </h1>
</body>
Arbeiten Sie mit Sitzungen? Kekse? –
dies ist mehr ein Backend-Problem als ein Front-End ... Sie müssen überprüfen, ob Sie mit PHP eingeloggt sind und entscheiden, ob Sie den Lader setzen oder nicht –
Sie können einen Cookie-Zähler: https://StackOverflow.com/questions/7958930/cookie-page-counter-in-php und trigger Animation erst zum ersten Mal. – SilverSurfer