Vertically Centered Loading Spinner Overlay

Question

I would like to show a vertically centered loading spinner like one of these https://github.com/jlong/css-spinners in a web page. Follow the codepen.io link on that page to see them in motion.

How can I do this via CSS? Consider I am dealing with a Google App Engine application based on Python, Twitter Bootstrap and Polymer.

Answer 1

Let's assume you go with the "Plus" spinner. You can wrap this in a fixed position div that covers the whole page:

<div id="pluswrap">
  <div class="plus">
    Loading...
  </div>
</div>

Since you might want to use different spinners at times, which have a different width, the CSS shouldn't hardcode the width. You can center an item vertically in a flexbox, and then use margin: 0 auto; on the item to be centered horizontally.

#pluswrap {
  position: fixed;
  width: 100%;
  height:100%;
  display: flex;
  align-items: center;
  top: 0;
}

.plus {
  display: flex;
  margin: 0 auto;
}

This way, you can even color the background, make it semi-transparent etc.

Here's a JSFiddle