CSS : positionner l'indicateur de chargement au centre de l'écran

Question

CSS : positionner l'indicateur de chargement au centre de l'écran

Demandé el 6 de Juin, 2011: Quand la question a-t-elle été
132409 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

Comment positionner mon indicateur de chargement au centre de l'écran. Actuellement, j'utilise un petit espace réservé et cela semble bien fonctionner. Cependant, lorsque je fais défiler vers le bas, l'indicateur de chargement reste dans cette position prédéfinie. Comment puis-je faire en sorte qu'il suive le défilement pour qu'il soit toujours au-dessus ??

 #busy
{
    position: absolute;
    left: 50%;
    top: 35%;
    display: none;
    background: transparent url("../images/loading-big.gif");
    z-index: 1000;
    height: 31px;
    width: 31px;
}

#busy-holder
{
    background: transparent;
    width: 100%;
    height: 100%;        
}

Demandé el 6 de Juin, 2011 par Frank Vilea

Answer 1

5 Réponses

Answer 2

66voto

Kraz Points 2751

utiliser position:fixed au lieu de position:absolute

Le premier est relatif à la fenêtre de votre écran. (non affecté par le défilement)

La seconde est relative à la page. (affecté par le défilement)

Remarque : IE6 ne prend pas en charge la position : fixe.

Répondu el 6 de Juin, 2011 par Kraz (2751 Points )

Answer 3

53voto

L Ananta Prasad Points 989

 .loader{
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background: url('//upload.wikimedia.org/wikipedia/commons/thumb/e/e5/Phi_fenomeni.gif/50px-Phi_fenomeni.gif') 
              50% 50% no-repeat rgb(249,249,249);
}

 <div class="loader"></div>

Répondu el 25 de Mars, 2015 par L Ananta Prasad (989 Points )

Answer 4

25voto

Salim Points 302

C'est ce que j'ai fait pour Angular 4:

 <style type="text/css">  
  .centered {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transform: -webkit-translate(-50%, -50%);
    transform: -moz-translate(-50%, -50%);
    transform: -ms-translate(-50%, -50%);
    color:darkred;
  }
</style>

</head>

<body>
  <app-root>
        <div class="centered">
          <h1>Loading...</h1>
        </div>
  </app-root>
</body>

Répondu el 24 de Juin, 2017 par Salim (302 Points )

Answer 5

2voto

Anish Joseph Points 667

changer la position absolue de div occupé en fixe

Répondu el 6 de Juin, 2011 par Anish Joseph (667 Points )

Answer 6

2voto

Praveen Gopal Points 461

Vous pouvez utiliser cet OnLoad ou pendant la récupération des informations de DB

En HTML, ajoutez le code suivant :

 <div id="divLoading">
<p id="loading">
    <img src="~/images/spinner.gif">
</p>

En CSS, ajoutez le code suivant :

 #divLoading {
  margin: 0px;
  display: none;
  padding: 0px;
  position: absolute;
  right: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  background-color: rgb(255, 255, 255);
  z-index: 30001;
  opacity: 0.8;}

#loading {
   position: absolute;
   color: White;
  top: 50%;
  left: 45%;}

si vous voulez afficher et masquer de JS :

   document.getElementById('divLoading').style.display = 'none'; //Not Visible
  document.getElementById('divLoading').style.display = 'block';//Visible

Répondu el 22 de Octobre, 2018 par Praveen Gopal (461 Points )

CSS : positionner l'indicateur de chargement au centre de l'écran

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

CSS : positionner l'indicateur de chargement au centre de l'écran

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: