@import url(http://fonts.googleapis.com/css?family=Play:400,700);
* {
  box-sizing: border-box;
}

body {
  background-color: #222;
  font-family: "Play";
}

h1 {
  font-size: 2rem;
  color: #FFF;
  text-align: center;
  text-transform: uppercase;
}

.smart-glass {
  position: absolute;
  margin: auto;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  width: 288px;
  height: 388px;
}

.logo {
  width: 288px;
  height: 288px;
  position: relative;
}

.circle {
  padding: 20px;
  border: 6px solid transparent;
  border-top-color: #40A800;
  border-radius: 50%;
  width: 100%;
  height: 100%;
  animation: connect 2.5s linear infinite;
}

.xbox {
  background: #FFF;
  width: 80px;
  height: 80px;
  border-radius: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  margin: auto;
}
.xbox:after, .xbox:before {
  content: "";
  display: block;
  border-top: 10px solid #222;
  border-radius: 50%;
  height: 90%;
  width: 120%;
  transform: rotate(-45deg);
  position: absolute;
  right: -30%;
  top: 15%;
}
.xbox:before {
  left: -30%;
  transform: rotate(45deg);
}

.loading-text {
  text-transform: uppercase;
  color: #FFF;
  text-align: center;
  margin: 10px 0;
  font-size: 1.4rem;
}

@keyframes connect {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}
<div class="smart-glass">
  <h1>Xbox</h1>
  <div class="logo">
    <div class="circle">
      <div class="circle">
          <div class="circle">
          </div>
      </div>
  </div>
  <div class="hold-x">
    <div class="xbox"></div>
   </div>
  </div>
  <div class="loading-text">
    Loading...
  </div>
</div>

Eh bien, j'ai vu cette animation de chargement sur un site Web et je prévois de l'insérer dans mon code, mais le problème que j'ai est de savoir comment arrêter l'animation une fois le chargement de la page terminé. Toute aide serait très appréciée

2
Sam hawkz 7 mars 2016 à 08:50

3 réponses

Meilleure réponse

Vous pouvez d'abord fadeOut la partie animée puis remove le contenu DOM de celle-ci

 $(".smart-glass").fadeOut(3000,function(){  // Will fade out in 3 secs
  $(".smart-glass").remove();   // animated part will be removed from DOM
  $('body').css('background-color',"#fff"); // background will be changed to white
 })
})

PLUNKER

1
brk 7 mars 2016 à 06:13

Vous pouvez faire comme:

$('.smart-glass').css('display','none');

Ici, je mets l'intervalle à cacher. Qui se cachent après quelques temps. Vous pouvez utiliser le code ci-dessus lorsque vous souhaitez masquer l'animation.

setInterval(function(){ $('.smart-glass').fadeOut(); 
$('body').css('background', 'transparent');

 }, 5000);
@import url(http://fonts.googleapis.com/css?family=Play:400,700);
* {
  box-sizing: border-box;
}

body {
  background-color: #222;
  font-family: "Play";
}

h1 {
  font-size: 2rem;
  color: #FFF;
  text-align: center;
  text-transform: uppercase;
}

.smart-glass {
  position: absolute;
  margin: auto;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  width: 288px;
  height: 388px;
}

.logo {
  width: 288px;
  height: 288px;
  position: relative;
}

.circle {
  padding: 20px;
  border: 6px solid transparent;
  border-top-color: #40A800;
  border-radius: 50%;
  width: 100%;
  height: 100%;
  animation: connect 2.5s linear infinite;
}

.xbox {
  background: #FFF;
  width: 80px;
  height: 80px;
  border-radius: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  margin: auto;
}
.xbox:after, .xbox:before {
  content: "";
  display: block;
  border-top: 10px solid #222;
  border-radius: 50%;
  height: 90%;
  width: 120%;
  transform: rotate(-45deg);
  position: absolute;
  right: -30%;
  top: 15%;
}
.xbox:before {
  left: -30%;
  transform: rotate(45deg);
}

.loading-text {
  text-transform: uppercase;
  color: #FFF;
  text-align: center;
  margin: 10px 0;
  font-size: 1.4rem;
}

@keyframes connect {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="smart-glass">
  <h1>Xbox</h1>
  <div class="logo">
    <div class="circle">
      <div class="circle">
          <div class="circle">
          </div>
      </div>
  </div>
  <div class="hold-x">
    <div class="xbox"></div>
   </div>
  </div>
  <div class="loading-text">
    Loading...
  </div>
</div>
2
ketan 7 mars 2016 à 06:09

Pourquoi ne pas utiliser une instruction if à cette fin? Il semble parfaitement correspondre à ce scénario. Je cherchais la même chose et je n'ai rien trouvé de facile et fonctionne vraiment, alors j'ai simplement mis le chargeur dans l'instruction if comme ci-dessous. Fonctionne pour mon code PHP.

<?php
if (!isset($_SESSION['something'])) {
    ?>
    <div>
        <div>
            <div class='loader'></div>
            <br>
            <div> Redirecting...</div>
        </div>
    </div>
    <?php
    echo '<meta http-equiv=REFRESH CONTENT=3;url=url>';
} else {
    ?>
1
tychen 3 août 2019 à 22:47