How to show ionic spinner in the centre position of the screen?

css center spinner on screen
ionic 4 spinner
ionic 4 vertical center
ion-spinner size
ion-spinner ionic 4 example
ionic horizontal align center
ionic 3 loading spinner example
react bootstrap spinner center

I have a spinner in my ionic project. I want to put the spinner in the centre position of the screen. But it always shows up in the left top corner as:

Html file is:

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

My scss file is:

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

Can you help?

I find the solution finally. Add a class spin and set text align center.

<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;
 }

Ion-spinner align center - ionic-v3, spinnerCenter { display: flex; flex-direction: column; justify-content: center; your code ,position changed to center ,but how I set the spinner center-top position. In this super short episode of bite-sized Ionic, I’m going to quickly show you how to add or remove the splash screen loading spinner. Depending on the design of your app, you may or may not want that little spinning loader while your splash screen is loading. If you do want to add one, open … Continue reading How to add or remove the splash screen loading spinner in Ionic Framework

Add a class spin and set text align center.

 <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;
  }

Position Spinner on the center of the window, I've got Spinner attached to the "outmost" div which may become too long so the scrollbars appear. So Spinner shows vertically centered which is� Hi thankx for reply .I try your code ,position changed to center ,but how I set the spinner center-top position. skoolley May 21, 2018, 2:38pm #6

You can even center the loader using the flexbox property in css. Try this

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

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

Show spinner at center of screen � Issue #17 � fgnass/spin.js � GitHub, All someone needs is to specify position: 'fixed' along with 50vh top and 50vw left alignment settings if you want the spinner to be always at center� The Spinner component provides a variety of animated SVG spinners. Spinners are visual indicators that the app is loading content or performing another process that the user needs to wait on. The default spinner to use is based on the platform. The default spinner for ios is "lines", and the default for android is "crescent".

<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.

Exactly Center an Image/Div Horizontally and Vertically, center { width: 300px; height: 300px; position: absolute; left: 50%; top: 50%; margin-left: -150px; margin-top: Negative margins are exactly half the height and width, which pull the element back into perfect center. I'd use display:inline -block for that. This helped me center a “loading” image within a fluid width container. Ionic is the app platform for web developers. Build amazing mobile, web, and desktop apps all with one shared code base and open web standards

Worked for me like this:

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

ionic spinner Code Example, Get code examples like "ionic spinner" instantly right from your google search results with the Grepper Chrome Extension. Ionic apps are made of high-level building blocks called Components, which allow you to quickly construct the UI for your app. Ionic comes stock with a number of components, including cards, lists, and tabs. Once you’re familiar with the basics, refer to the API Index for a complete list of each component and sub-component.

Ion spinner center, <ion-spinner icon="circles" 10 Apr 2019 Show a loading spinner to your users with the ionic I want to put the spinner in the centre position of the screen. Ionic is the app platform for web developers. Build amazing mobile, web, and desktop apps all with one shared code base and open web standards

Single Element CSS-Only Absolute Center Overlay Spinner, .loading:before {. 17. content: '';. 18. display: block;. 19. position: fixed;. 20. top: 0;. 21. left: 0;. 22. width: 100%;. 23. height: 100%;. 24. background-color: rgba(0,0� In this article we are going to show different spinners available in Ionic. In our last article we learned to make a small application with Ionic and there we also learned to code and debug in Visual Studio Code.

How to Create a Custom Loading Component in Ionic 2, A loading service is on the roadmap for Ionic 2, but it has been heavily height: 100%; position: absolute; display: flex; justify-content: center;� How to change icon ionic 3, change splash screen ionic freamwork, change package name ionic, change version ionic Buy me a cofee : https://www.buymeacoffee.c

Comments
  • i think we need plus one every month for plus those answers that help us every month... like this answer... thanks this helped me for the second time
  • why you used position:fixed ? May I know please
  • Thanks. It works but not perfect. Now it is in the centre of top line. Can you make it in the centre of screen?