Hello, I need to place a spinner in the middle of the page with a text under it.
I’ve searched alot but none of the examples to place stuff in the center of a page works. It’d be just an empty page
This is the best I’ve got but the text isn’t getting under the spinner and moving it:
<ion-content>
<ion-grid style="height: 100%">
<ion-row justify-content-center align-items-center style="height: 100%">
<ion-spinner name="ios"></ion-spinner><br><br><br>
Cargando centros...
</ion-row>
</ion-grid>
</ion-content>
This is my result with the above example:
Could someone give me a hand?
Thanks!!
2 Likes
so did you try doing it using CSS?
I tried that already but it didnt work idk if I’m doing it wrong or something, I’m new to Ionic and never developed a web either
@Kyrax80 You have to use style flex-direction: column
<ion-content padding>
<ion-grid style="height: 100%">
<ion-row justify-content-center align-items-center style="height: 100%; flex-direction: column">
<ion-spinner name="ios"></ion-spinner>
Cargando centros...
</ion-row>
</ion-grid>
</ion-content>
I have fixed your code , please check here :
9 Likes
Thank you very much, that worked pretty well.
I have another question if you don’t mind.
I want to show that loading spinner in the center as it currently is with your code, in the center.
But once my data has finished loading I want to show a list of this data.
How can I do this? Is it possible to have 2 grids in a page and just show one or another with a <div *ngIf...>
? Because I’m trying this but if I do:
<div *ngIf="!loading">
<ion-grid>
<ion-row>
<ion-col>
My data
</ion-col>
</ion-row>
</ion-grid>
</div>
<div *ngIf="loading">
<ion-grid style="height: 100%">
<ion-row justify-content-center align-items-center style="height: 100%; flex-direction: column">
<ion-spinner name="ios"></ion-spinner>
Cargando centros...
</ion-row>
</ion-grid>
</div>
The spinner shows in the top of the page
@Kyrax80 You can implement with the following code:
<ion-content padding>
<ion-grid style="height: 100%">
<ion-row *ngIf="loader" justify-content-center align-items-center style="height: 100%; flex-direction: column">
<ion-spinner name="ios"></ion-spinner>
Cargando centros...
</ion-row>
<ion-row *ngIf="!loader" style="height: 100%; flex-direction: column">
<p>List item 1</p>
<p>List item 2</p>
<p>List item 3</p>
<p>List item 4</p>
<p>List item 5</p>
<p>List item 6</p>
</ion-row>
</ion-grid>
</ion-content>
export class HomePage {
loader = true;
constructor(public navCtrl: NavController) {
}
}
check StackBlitz . I updated the code.
2 Likes
Perfect! You’re my savior, thank you very much