How to properly center a loading icon?

ionic-v1
1

I found this related thread:

But the problem is, it center the whole <ion-content>. What I need is just to center specific element. See the image below:

I need the loading icon to be put to center. And also I want to reuse it on other pages. Some of my pages may need two or more loading icons.

Here is some code snippet:

<ion-side-menu side="right" width="myWidthValue + 205">
        <ion-content>
            <div class="list">
                <label class="item item-input">
                    <i class="icon ion-search placeholder-icon"></i>
                    <input type="text" placeholder="Search Products">
                </label>
                <div class="item">
                    <h1 class="ion-loading-c"></h1>
                </div>
                <div class="item item-body text-center">
                    <img class="full-image" ng-src="{{$root.g.userInfo.picture}}">
                </div>

I’m not good in css, I swear.

2

Did you try…

h1.ion-loading-c { text-align: center;}
3

Just tried that but didn’t work:

4

Hmmmm… I think I need to give up on this. I will just add a text so that it won’t be ugly even if not centered.

5

Add the text-center class

2 Likes
6

Hooooray!!! That worked! Thanks a lot! :smiley:

7
.loader { border: 16px solid #0000FF; border-radius: 100%; border-top: 16px solid darkorange; border-right: 16px solid white; border-bottom: 16px solid green; width: 120px; height: 120px; -webkit-animation: spin 0.90s linear infinite; animation: spin 0.70s linear infinite; }

@-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}

Aman Loading button

Help me with html format