5
votes

Comment afficher le spinner ionique en position centrale de l'écran?

J'ai un spinner dans mon projet ionique. Je veux mettre le spinner au centre de l'écran. Mais il apparaît toujours dans le coin supérieur gauche comme:

Le fichier HTML est:

page-login {
    ion-spinner {
    width: 28px;
    height: 28px;
    stroke: #444;
    fill: #222;
  }
}

Mon fichier scss est:

<div *ngIf="spinner == 'true'">
   <ion-spinner name="bubbles"></ion-spinner>
</div>

Pouvez-vous m'aider?

ionic-framework ionic3

0 commentaires

5 Réponses :

2
votes

Ajoutez une rotation de classe et définissez le centre d'alignement du texte.

 <div class="spin" *ngIf="spinner == 'true'">
        <ion-spinner name="bubbles"></ion-spinner>
 </div>

.spin{
    text-align: center;
  }
  ion-spinner {
    width: 28px;
    height: 28px;
    stroke: #444;
    fill: #222;
  }

1 commentaires

Merci. Cela fonctionne mais pas parfait. Maintenant, il est au centre de la ligne supérieure. Pouvez-vous le faire au centre de l'écran?

13
votes

Je trouve enfin la solution. Ajoutez une rotation de classe et définissez le centre d'alignement du texte.

<div class="spin" *ngIf="spinner == 'true'">
    <ion-spinner name="bubbles"></ion-spinner>
</div>

.spin{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
 }
 ion-spinner {
    width: 28px;
    height: 28px;
    stroke: #444;
    fill: #222;
 }

2 commentaires

je pense que nous avons besoin de plus un chaque mois pour plus ces réponses qui nous aident chaque mois ... comme cette réponse ... merci cela m'a aidé pour la deuxième fois

pourquoi avez-vous utilisé position: fixed ? Puis-je savoir s'il vous plaît

2
votes

Vous pouvez même centrer le chargeur en utilisant la propriété flexbox en css. Essayez ceci

<div class="spin" *ngIf="spinner == 'true'">
   <ion-spinner name="bubbles"></ion-spinner>
</div>

.spin{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
}

0 commentaires

1
votes

<pre>
<ion-spinner></ion-spinner>

ion-spinner {
    position: fixed;
    z-index: 999;
    height: 5em;
    width: em;
    overflow: show;
    margin: auto;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}
</pre>
Thats what I did.
Forgot the question I got help from.

0 commentaires

0
votes

A travaillé pour moi comme ceci:

<div class="ion-text-center" *ngIf="spinner == 'true'">
   <ion-spinner name="bubbles"></ion-spinner>
</div>

0 commentaires