0
働く読み込み画面があります。問題は、すべてのリロード時に表示されることです。私はログイン時にこれを表示するだけですか？私は何とかlogin.phpから表示する関数を呼び出すのを見始めたのですか？私の懸念は、関数をPHPから呼び出す方法です。どんな助けもありがとうございます。ありがとう！あなたの状況でログイン時にのみ私の読み込み画面を表示
$(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>
のようなものには、このライン
を交換し、あなたがセッションで作業していますか？クッキー？ –
これはフロントエンドよりもバックエンドの問題です... PHPを使用してログインしたかどうかを確認し、ローダーを置くかどうかを決定する必要があります –
Cookieカウンタを作成できます：https://stackoverflow.com/questions/7958930/cookie-page-counter-in-phpおよびトリガアニメーションのみを初めて使用します。 – SilverSurfer