Horizontal/Vertical center a spinner in a bootstrap button

HTML & CSS
1

Hi, there.
My goal is Horizontal/Vertical center the spinner
inside the button but I don’t really understand why
on earth is aligned to the bottom :frowning:
See the demo

.box{
        width: 150px;
        margin: 0 auto;
      }
      .loader,
      .loader::before,
      .loader::after {
        width: 1.5em;
        height: 1.5em;
        border-radius: 50%;
        animation: buttonSpinner 1.8s infinite ease-in-out;
        animation-fill-mode: both;
      }
      .loader {
        position: relative;
        margin: 0 auto;
        font-size: 8px;
        color: inherit;
        text-indent: -9999em;
        transform: translateZ(0);
        animation-delay: -.16s;
      }
      .loader::before,
      .loader::after {
        position: absolute;
        top: 0;
        content: "";
      }
      .loader::before {
        left: -3.5em;
        animation-delay: -.32s;
      }
      .loader::after {
        left: 3.5em;
      }

      @keyframes buttonSpinner {
        0%,
        80%,
        100% {
          box-shadow: 0 2.5em 0 -1.3em;
        }
        40% {
          box-shadow: 0 2.5em 0 0;
        }
      }


<div class="box">
      <button class="btn btn-primary btn-lg btn-block" type="submit">
          <div class="loader">Loading...</div>
        </button>  
</div>
2

You are absolutely placing the elements so they are not in the flow and thus do not affect the button height. I would just drag them back to the centre like this:


.loader{top:-2.2em;}
3

Thanks but its so tricky :frowning:

4

Does that mean it doesn’t work for you or you were thinking of something else?

5

It works but I don’t like to work it out
with absolute value

6

But you are effectively using an absolute value to place it in the first place?

The box shadow is the absolute value pushing it down by 2.5em.

box-shadow: 0 2.5em 0 -1.3em;

Therefore you need to pull the element back up by 2.5em. They both match as the animation is the box shadow rather than the element itself.

3 Likes
7

As far as I can see, 50% is the only value
in your box code that is not absolute. :rolleyes:

coothead

8

@coothead
Sorry I forgot the credit ^^
https://projects.lukehaas.me/css-loaders/

9

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.