Question

我有一个正常工作的加载屏幕。问题是它会在每次重新加载时显示。当我登录时，我怎么能只显示这个？我已经开始以某种方式调用函数来从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>

Answer 1

在您的情况下，很容易让加载div在您想要的页面上显示（登录）

1-默认情况下在css中隐藏加载封面，如果添加了类show，则显示

const CustomerDetails = ({ customerDetails }) => (

2-并通过添加show class仅在登录页面上显示它。替换此行

const CustomerDetails = ({ customerDetails }) => (
  <Card>
    <CardTitle title="Πληροφορίες Πελάτη" />
    <CardHeader
      title="Δεδομένα Altamira"
      showExpandableButton
    />
    <CardText expandable>
      <div>
        <TextField
          value={customerDetails.commercialName}
          floatingLabelText={CUSTOMER_DETAILS_COMMERCIAL}
        /><br />
        <TextField
          value={customerDetails.lastName}
          floatingLabelText={CUSTOMER_DETAILS_LASTNAME}
        /><br />
        <TextField
          value={customerDetails.firstName}
          floatingLabelText={CUSTOMER_DETAILS_NAME}
        /><br />
      </CardText>
   </Card>
);

这样的事情

#loader-wrapper{display:none}
#loader-wrapper.show{display:block}

仅在登录时显示我的加载屏幕

1 个答案: